FormRadio
Using the FormRadioGroup
and FormRadio
components to create a Form with custom validation that requires a user to select an option from a list of radio buttons.
import { useId } from "react";
import * as Ariakit from "@ariakit/react";
import "./style.css";
export default function Example() {
const id = useId();
form.useValidate(() => {
if (!form.getValue(form.names.color)) {
form.setError(form.names.color, "Please select a color.");
}
});
form.useSubmit(async (state) => {
alert(JSON.stringify(state.values));
});
return (
<h2 id={id} className="heading">
Preferences
</h2>
Favorite color
<label className="radio-label">
Red
</label>
<label className="radio-label">
Green
</label>
<label className="radio-label">
Blue
</label>
);
}
Follow updates
Join 1,000+ subscribers and receive monthly updates with the latest improvements on Examples.