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.

Form Radio Form controls

Edit withVite Next.js

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
import { useId } from "react";
import * as Ariakit from "@ariakit/react";
import "./style.css";

export default function Example() {
  const id = useId();
  const form = Ariakit.useFormStore({ defaultValues: { color: "" } });

  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 (
    <Ariakit.Form store={form} aria-labelledby={id} className="wrapper">
      <h2 id={id} className="heading">
        Preferences
      </h2>
      <Ariakit.FormRadioGroup className="radio-group">
        <Ariakit.FormGroupLabel className="radio-group-label">
          Favorite color
        </Ariakit.FormGroupLabel>
        <Ariakit.FormError name={form.names.color} className="error" />
        <label className="radio-label">
          <Ariakit.FormRadio name={form.names.color} value="red" />
          Red
        </label>
        <label className="radio-label">
          <Ariakit.FormRadio name={form.names.color} value="green" />
          Green
        </label>
        <label className="radio-label">
          <Ariakit.FormRadio name={form.names.color} value="blue" />
          Blue
        </label>
      </Ariakit.FormRadioGroup>
      <Ariakit.FormSubmit className="button">Submit</Ariakit.FormSubmit>
    </Ariakit.Form>
  );
}

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

export default function Example() {
  const id = useId();
  const form = Ariakit.useFormStore({ defaultValues: { color: "" } });

  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 (
    <Ariakit.Form store={form} aria-labelledby={id} className="wrapper">
      <h2 id={id} className="heading">
        Preferences
      </h2>
      <Ariakit.FormRadioGroup className="radio-group">
        <Ariakit.FormGroupLabel className="radio-group-label">
          Favorite color
        </Ariakit.FormGroupLabel>
        <Ariakit.FormError name={form.names.color} className="error" />
        <label className="radio-label">
          <Ariakit.FormRadio name={form.names.color} value="red" />
          Red
        </label>
        <label className="radio-label">
          <Ariakit.FormRadio name={form.names.color} value="green" />
          Green
        </label>
        <label className="radio-label">
          <Ariakit.FormRadio name={form.names.color} value="blue" />
          Blue
        </label>
      </Ariakit.FormRadioGroup>
      <Ariakit.FormSubmit className="button">Submit</Ariakit.FormSubmit>
    </Ariakit.Form>
  );
}

Follow updates

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

Read latest issue