Radio

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

Radio Form controls

appleorangewatermelon

Edit withVite Next.js

123456789101112131415161718192021222324
import "./style.css";
import * as Ariakit from "@ariakit/react";

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

import "./style.css";
import * as Ariakit from "@ariakit/react";

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

API

useRadioStore()
useRadioContext()

<RadioProvider>
  <RadioGroup>
    <Radio />
  </RadioGroup>
</RadioProvider>
useRadioStore()
useRadioContext()

<RadioProvider>
  <RadioGroup>
    <Radio />
  </RadioGroup>
</RadioProvider>

Follow updates

Join 1,000+ subscribers and receive monthly updates with the latest improvements on Components.

Read latest issue