Components

Radio

Radio enables a user to make a single selection from a group of options.

Every radio element must be labeled appropriately. There are a few ways to label radios and groups of radios:

  • To group multiple radio inputs, use the Fieldset component in addition to giving radio buttons the same name attribute
  • Use the label prop to label individual radio inputs
import { Radio } from '@sproutsocial/racine'
() => {
const values = ['x', 'facebook', 'instagram']
const [selectedValue, setSelectedValue] = useState(values[0])
const isChecked = value => value === selectedValue
return (
<Fieldset label="Choose a network">
{values.map(value => (
<Box display='flex' alignItems='center'>
<Radio
name="networks"
value={value}
label={value}
checked={isChecked(value)}
onChange={e => setSelectedValue(e.target.value)}
mr={300}
mb={300}
/>
</Box>
))}
</Fieldset>
)
}

Properties

NameTypeDefaultDescriptionRequired?
id
string
ID of the form element, should match the "for" value of the associated label
name
string
label
string
Label text to display next to the radio input
ariaLabel
string
Label used to describe the input if not used with an accompanying visual label
value
string
checked
boolean
disabled
boolean
false
qa
object
onChange
(e: React.SyntheticEvent<HTMLInputElement>) => void
onFocus
(e: React.FocusEvent<HTMLInputElement>) => void
onBlur
(e: React.FocusEvent<HTMLInputElement>) => void