Custom label to be used by screen readers. When provided, an aria-label will be added to the element.
Function that will be called to render the visual representation.
It will be passed an object indicating whether the button is checked. It
should return a react element.
For example:
children={({ checked }) => <Box ...>{...}</Box>}
({ checked }) => {...}
Same as React <input disabled={} />. Also adds a hidden input element with the same name so form submissions work.
The default color of the border surrounding the checked icon in RadioButton checked state.
{"dark": "accent-1", "light": "brand"}
{
"dark": "rgba(255, 255, 255, 0.5)",
"light": "rgba(0, 0, 0, 0.15)"
}
The color of the border surrounding the checked icon in RadioButton checked state.
Any additional style for the container around the radio button and its label.
"any CSS"
(props) => {}
The background color of the Box surrounding the RadioButton when hovered over.
{"dark": "white", "light": "black"}