FormRadio

Basic

Preview

Pick what you like

Apple

Banana

Orange

Others

Code

<FormRadio
  name="picked"
  label="Pick what you like"
  options={[
    { value: "apple", label: "Apple" },
    { value: "banana", label: "Banana" },
    {
      value: "orange",
      label: "Orange",
    },
    {
      value: "others",
      label: "Others",
    },
  ]}
/>

Disabled

Preview

Pick what you like

Apple

Banana

Orange

Others

Code

<FormRadio
  disabled={true}
  name="picked"
  label="Pick what you like"
  options={[
    { value: "apple", label: "Apple" },
    { value: "banana", label: "Banana" },
    {
      value: "orange",
      label: "Orange",
    },
    {
      value: "others",
      label: "Others",
    },
  ]}
/>

One-line layout

Preview

Is it true that you're so cool that ice cubes are jealous of you?

Yes

No

Code

<FormRadio
  name="picked"
  label="Is it true that you're so cool that ice cubes are jealous of you?"
  options={[
    { value: true, label: "Yes" },
    { value: false, label: "No" },
  ]}
  className="radio-horizontal"
/>

Controlled

Preview

Pick what you like

Apple

Banana

Orange

Others

Value:

Pick what you like

Apple

Banana

Orange

Others

Value: others

Do yo like cats?

Yes

No

Value:

Type of value: undefined

Code

import { useState } from "react";
import FormRadio from "@/ui/FormRadio";

const Controlled = () => {
  const [value1, setValue1] = useState("");
  const [value2, setValue2] = useState("others");
  const [booleanValue, setBooleanValue] = useState<boolean>();

  return (
    <div className="flex flex-col gap-6">
      <div>
        <FormRadio
          value={value1}
          label="Pick what you like"
          options={[
            { value: "apple", label: "Apple" },
            { value: "banana", label: "Banana" },
            {
              value: "orange",
              label: "Orange",
            },
            {
              value: "others",
              label: "Others",
            },
          ]}
          onChange={setValue1}
        />

        <p>Value: {value1}</p>
      </div>

      <div>
        <FormRadio
          value={value2}
          label="Pick what you like"
          options={[
            { value: "apple", label: "Apple" },
            { value: "banana", label: "Banana" },
            {
              value: "orange",
              label: "Orange",
            },
            {
              value: "others",
              label: "Others",
            },
          ]}
          onChange={setValue2}
        />

        <p>Value: {value2}</p>
      </div>

      <div>
        <FormRadio
          value={booleanValue}
          label="Do yo like cats?"
          options={[
            { value: true, label: "Yes" },
            { value: false, label: "No" },
          ]}
          onChange={setBooleanValue}
        />

        <p>Value: {JSON.stringify(booleanValue)}</p>
        <p>Type of value: {typeof booleanValue}</p>
      </div>
    </div>
  );
};

export default Controlled;

Uncontrolled (with <form>)

Preview

Pick what you like*

Apple

Banana

Orange

Others

Pick what you like

Cat

Dog

Others

Do yo like cats?

Yes

No

Submit

formDataObj:

Note that the value of `isCatLover` is a string although we give it boolean options

Code

import { useState, type FormEventHandler } from "react";
import FormRadio from "@/ui/FormRadio";

const Uncontrolled = () => {
  const [formDataObj, setFormDataObj] =
    useState<Record<string, FormDataEntryValue>>();

  const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {
    event.preventDefault();

    const formData = new FormData(event.currentTarget);
    const updates = Object.fromEntries(formData);

    setFormDataObj(updates);
  };

  return (
    <form onSubmit={handleSubmit} className="flex flex-col gap-6">
      <FormRadio
        required={true}
        name="pickedFruit"
        label="Pick what you like"
        options={[
          { value: "apple", label: "Apple" },
          { value: "banana", label: "Banana" },
          {
            value: "orange",
            label: "Orange",
          },
          {
            value: "others",
            label: "Others",
          },
        ]}
      />

      <FormRadio
        name="pickedAnimal"
        defaultValue="dog"
        label="Pick what you like"
        options={[
          { value: "cat", label: "Cat" },
          { value: "dog", label: "Dog" },
          {
            value: "others",
            label: "Others",
          },
        ]}
      />

      <FormRadio
        name="isCatLover"
        label="Do yo like cats?"
        options={[
          { value: true, label: "Yes" },
          { value: false, label: "No" },
        ]}
      />

      <button type="submit" className="border">
        Submit
      </button>

      <p>formDataObj: {JSON.stringify(formDataObj)}</p>
      <p className="text-red-500">
        Note that the value of `isCatLover` is a string although we give it
        boolean options
      </p>
    </form>
  );
};

export default Uncontrolled;