RadioButton

a radio button control

Props

a11yTitle

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

string

"a user friendly label for screen readers"

checked

Same as React <input checked={} />

boolean

true

false

children

Function that will be called to render the visual representation.

function

It will be passed an object indicating whether the button is checked. It should return a react element.

({ checked }) => <Box>...</Box>

disabled

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

boolean

true

false

id

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

string

"inputId"

label

Label text to place next to the control.

node

"label"

name

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

string

"name"

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={} />.

function

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

React/DOM Properties

At its core, the RadioButton component is a regular <input> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for input elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.

Theme

global.colors.control

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

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

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

radioButton.border.color

The color of the border of the Radio Button.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

{ 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.

string

"2px"

radioButton.check.background.color

The background color of the checked icon in the RadioButton.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

radioButton.check.color

The color of the checked icon in the RadioButton.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

radioButton.check.extend

Any additional style for the checked RadioButton.

string

Any CSS.

css`color: 'blue'`

function

(props) => {}

radioButton.check.radius

The border-radius of the RadioButton.

string

"100%"

radioButton.color

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

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

radioButton.container.extend

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

string

Any CSS.

css`color: 'blue'`

function

(props) => {}

radioButton.extend

Any additional style for the radio button itself.

string

Any CSS.

css`color: 'blue'`

function

(props) => {}

radioButton.font.weight

The font weight of the label.

string

"normal"

number

radioButton.gap

The gap between the label and the RadioButton itself.

string

"small"

radioButton.hover.background.color

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

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

radioButton.hover.border.color

The color of the RadioButton border when hovered over.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

{ dark: "white", light: "black" }

radioButton.icon.extend

Any additional style for the RadioButton icon.

string

Any CSS.

css`color: 'blue'`

function

(props) => {}

radioButton.icon.size

The size of the icon in the RadioButton.

string

"small"

radioButton.icons.circle

The icon to replace the inner checked circle.

element

<Icon />

radioButton.size

The size of the RadioButton.

string

"24px"