Radio buttons allow users to make a single selection among a group of options.
In a form, always place radios underneath one another to aid in a user’s ability
to scan the form.
Usage The Radio component maps to a radio input and a label. The label is
provided as children to the component. If you need custom label behaviour use
the RadioPrimitive
< Stack gap = " medium " >
< Radio checked = { false } > Default </ Radio >
< Radio checked > Checked </ Radio >
< Radio disabled > Disabled </ Radio >
< Radio checked disabled >
Checked + disabled
</ Radio >
</ Stack >
Controlled The Radio component passes on the original event through the onChange handler. Use the event target's checked property to get the latest value and update state accordingly.
const [ value , setValue ] = useState ( ) ;
const handlerForKey = React . useCallback ( ( key ) => ( ) => setValue ( key ) , [ ] ) ;
const isChecked = ( key ) => key === value ;
return (
< Stack gap = " medium " >
< Radio checked = { isChecked ( 'first' ) } onChange = { handlerForKey ( 'first' ) } >
First
</ Radio >
< Radio checked = { isChecked ( 'second' ) } onChange = { handlerForKey ( 'second' ) } >
Second
</ Radio >
< Radio checked = { isChecked ( 'third' ) } onChange = { handlerForKey ( 'third' ) } >
Third
</ Radio >
</ Stack >
) ;
Size The Radio is available in a "small" size. Reserve this appearance for data-rich, dense interfaces.
< Stack gap = " small " >
< Radio size = " small " checked = { false } >
Default
</ Radio >
< Radio size = " small " checked >
Checked
</ Radio >
< Radio size = " small " disabled >
Disabled
</ Radio >
< Radio size = " small " checked disabled >
Checked + disabled
</ Radio >
</ Stack >
Guidelines List options in a logical order (alphabetically, numerically, time-based, etc.)
Most likely to least likely to be selected
Include at least two or more choices
Include mutually exclusive options—this means that each option must be independent from every other option in the list
By default, no radio elements should be selected
Groups Use the RadioGroup to implement a group of radios. Each Radio within a group must have a "value" prop.
const [ selected , setSelected ] = useState ( 'bulbasaur' ) ;
return (
< RadioGroup value = { selected } onChange = { setSelected } >
< Stack gap = " medium " >
< Radio value = " bulbasaur " > Bulbasaur </ Radio >
< Radio value = " charmander " > Charmander </ Radio >
< Radio value = " squirtle " > Squirtle </ Radio >
</ Stack >
</ RadioGroup >
) ;
Primitive Use the RadioPrimitive to implement custom behaviours and appearances.
const labels = [ 'First' , 'Second' , 'Third' ] ;
const [ value , setValue ] = useState ( false ) ;
const handleChange = ( event ) => setValue ( event . target . value ) ;
return (
< Stack gap = " small " >
{ labels . map ( ( label ) => {
const checked = label === value ;
return (
< Inline
as = " label "
gap = " medium "
padding = " large "
borderRadius = " medium "
background = { checked ? 'active' : 'muted' }
>
< RadioPrimitive
name = " demo-radio-primitives "
key = { label }
checked = { checked }
value = { label }
onChange = { handleChange }
/>
< Text > { label } </ Text >
</ Inline >
) ;
} ) }
</ Stack >
) ;
