Ariakit
/

Radio

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

RadioForm controls
Edit example
Open preview in a new tab
import * as Ariakit from "@ariakit/react";

import "./style.css";



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>

Stay tuned

Join 1,000+ subscribers and receive monthly tips & updates on new Ariakit content.

No spam. Unsubscribe anytime. Read latest issue⁠