title: "Radio" slug: "/packages/radio" category: "control" componentNames:

• "Radio"
• "RadioItem"

Radio

Accessible Radio component that follows the WAI-ARIA Radio Button/Group Pattern.

import { Radio, RadioItem } from "@ds-kit/radio"

Basic Example

A basic example of an Radio component can look like this:

<Radio>
  <RadioItem value="apple" text="apple" />
  <RadioItem value="orange" text="orange" />
  <RadioItem value="watermelon" text="watermelon" />
</Radio>

Radio component with disabled RadioItem

<Radio>
  <RadioItem disabled={true} value="apple" text="apple" />
  <RadioItem value="orange" text="orange" />
  <RadioItem value="watermelon" text="watermelon" />
</Radio>

Controlled Radio

class ControlledRadio extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      checked: "orange",
    }
  }

  render() {
    return (
      <Radio checked={this.state.checked}>
        <RadioItem
          value="apple"
          text="apple"
          onChange={() => {
            this.setState({ checked: "apple" })
          }}
        />
        <RadioItem
          value="orange"
          text="orange"
          onChange={() => {
            this.setState({ checked: "orange" })
          }}
        />
        <RadioItem
          value="watermelon"
          text="watermelon"
          onChange={() => {
            this.setState({ checked: "watermelon" })
          }}
        />
      </Radio>
    )
  }
}