Radio

Usage

import {
  Radio,
  RadioButton,
  RadioHintText,
  RadioItem,
  RadioLabel,
} from "@govtechmy/myds-react/radio";

<Radio>
  <RadioItem>
    <RadioButton value="apple" id="apple" />
    <RadioLabel htmlFor="apple">Apple</RadioLabel>
  </RadioItem>
  <RadioItem>
    <RadioButton value="banana" id="banana" />
    <div>
      <RadioLabel htmlFor="banana">Banana</RadioLabel>
      <RadioHintText htmlFor="banana">Comes pre-packaged.</RadioHintText>
    </div>
  </RadioItem>
</Radio>

Examples

Size

Use the size prop to change the radio size.

Disabled

Disable all radio items by setting the disabled prop to true on the Radio component.

Disable individual radio items by setting the disabled prop to true on the RadioItem component:

Controlled Component

To use Radio as a controlled component, set the value and onValueChange props.

const [value, setValue] = useState("")
 
<Radio value={value} onValueChange={setValue}>
  {/* ... */}
</Radio>

Props

Radio

Radio is abstracted from Radix UI's RadioGroup.Root. Please refer to the API references in this documentation.

RadioButton

RadioButton is abstracted from Radix UI's RadioGroup.Item. Please refer to the API references in this documentation.

RadioItem

RadioHintText uses the same props as a regular div element.

RadioHintText

RadioHintText uses the same props as a regular label element.

RadioLabel

RadioLabel uses the same props as a regular label element.