Radio

Components

Radio

View on GitHub

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

Choose a network

twitter

facebook

instagram

import { Radio } from '@sproutsocial/racine'

() => {
  const values = ['twitter', '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>
  )
}

() => {
  const values = ['twitter', '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

System props

System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.

COMMON

Learn more

Name	Type	Default	Description
`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: SyntheticInputEvent<HTMLInputElement>) => void`
`onFocus`	`(e: SyntheticFocusEvent<HTMLInputElement>) => void`
`onBlur`	`(e: SyntheticFocusEvent<HTMLInputElement>) => void`