This site is under construction Subscribe to updates

Radio

Choose one option from a list of choices presented as radio buttons. This component is based on the WAI-ARIA Radio Group Pattern.

appleorangewatermelon

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { Radio, RadioGroup, useRadioState } from "ariakit/radio";
import "./style.css";

export default function Example() {
  const radio = useRadioState();
  return (
    <RadioGroup state={radio}>
      <label className="label">
        <Radio className="radio" value="apple" />
        apple
      </label>
      <label className="label">
        <Radio className="radio" value="orange" />
        orange
      </label>
      <label className="label">
        <Radio className="radio" value="watermelon" />
        watermelon
      </label>
    </RadioGroup>
  );
}

Installation

npm install ariakit

Learn more in Getting started.

API

useRadioState()

<RadioGroup>
  <Radio />
</RadioGroup>