Radio

Radios are used when only one choice may be selected in a series of options.
Radio composes reakit's checkbox component.

View source View theme source View storybook

Imports

Radio - main radio component
RadioInput - radio's internal input component
RadioLabel - label for radio
- RadioIcon - renders radio's icon
RadioGroup - groups multiple radios together

Usage

Basic usage.

Radio sizes

Radio comes with 3 sizes sm md lg

Disabled radios

Default selected

You can pass defaultState to initialize the radio group with a default selected value.

Controlled radio

Customizing radio

To customize the appearance of the Radio component we can simply pass down children components (RadioLabel, RadioInput, RadioIcon) for more control.

Integrations

// TBD

API Reference

Radio

Radio composes reakit's radio component

Prop	Type	Default
`id`	`string`	-
`value`	`string`	-
`size`	`union`	`md`
`disabled`	`boolean`	-
`focusable`	`boolean`	-
`checkedIcon`	`React.ReactNode`	-
`uncheckedIcon`	`React.ReactNode`	-
`disabledIcon`	`React.ReactNode`	-

RadioGroup

Prop	Type	Default
`state`	`string`	-
`defaultState`	`string`	-
`onStateChange`	`Function`	-
`ariaLabel`	`string`	-

RadioIcon

Prop	Type	Default
`checkedIcon`	`React.ReactNode`	-
`uncheckedIcon`	`React.ReactNode`	-
`disabledIcon`	`React.ReactNode`	-