Choose one option from a list of choices presented as radio buttons. This component is based on the WAI-ARIA Radio Group Pattern.
1234567891011121314151617181920212223import { 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> ); }
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> ); }
npm install ariakit
Learn more in Getting started.
useRadioState() <RadioGroup> <Radio /> </RadioGroup>