Radio

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

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`		name attribute
`label`	`string`		label text to display
`ariaLabel`	`string`		Label used to describe the input if not used with an accompanying label
`value`	`string`
`checked`	`boolean`		Whether or not the radio is checked
`disabled`	`boolean`	`false`	Whether or not the radio is disabled
`qa`	`Object`		Customizable QA Object - for backwards compatibility
`onChange`	`signature`
`onFocus`	`signature`
`onBlur`	`signature`