grommet
components

RadioButton

a radio button control

Storybook
CodeSandbox

Props

a11yTitle

Custom label to be used by screen readers. When provided, an aria-label will be added to the element.

"string"

checked

Same as React <input checked={} />
truefalse

children

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 }) =&gt; &lt;Box ...>{...}</Box>}

({ checked }) => {...}

disabled

Same as React <input disabled={} />. Also adds a hidden input element with the same name so form submissions work.

truefalse

id

The DOM id attribute value to use for the underlying <input/> element.
"string"

label

Label text to place next to the control.
"node"

name

The DOM name attribute value to use for the underlying <input/> element.

"string"

onChange

Function that will be called when the user clicks the radio button. It will be passed a React event object. The current state can be accessed via event.target.checked. Same as React <input onChange={} />.

({ target: { checked } }) => {...}

Theme

global.colors.control

The default color of the border surrounding the checked icon in RadioButton checked state.

{"dark": "accent-1", "light": "brand"}

radioButton.border.color

The color of the border of the Radio Button.
{
  "dark": "rgba(255, 255, 255, 0.5)",
  "light": "rgba(0, 0, 0, 0.15)"
}

radioButton.border.width

The width size of the border of the RadioButton.
"2px"

radioButton.check.background.color

The background color of the checked icon in the RadioButton.
string | {dark: string, light: string}

radioButton.check.color

The color of the checked icon in the RadioButton.
string | { dark: string, light: string }

radioButton.check.extend

Any additional style for the checked RadioButton.
"any CSS"
(props) => {}

radioButton.check.radius

The border-radius of the RadioButton.
"100%"

radioButton.color

The color of the border surrounding the checked icon in RadioButton checked state.

string | { dark: string, light: string }

radioButton.container.extend

Any additional style for the container around the radio button and its label.

"any CSS"
(props) => {}

radioButton.extend

Any additional style for the radio button itself.
"any CSS"
(props) => {}

radioButton.font.weight

The font weight of the label.
number | string

radioButton.gap

The gap between the label and the RadioButton itself.
"small"

radioButton.hover.background.color

The background color of the Box surrounding the RadioButton when hovered over.

string | { dark: string, light: string }

radioButton.hover.border.color

The color of the RadioButton border when hovered over.
{"dark": "white", "light": "black"}

radioButton.icon.extend

Any additional style for the RadioButton icon.
"any CSS"
(props) => {}

radioButton.icon.size

The size of the icon in the RadioButton.
string

radioButton.icons.circle

The icon to replace the inner checked circle.
React.Element

radioButton.size

The size of the RadioButton.
"24px"