Radio Button

The RadioButton component allows users to select one option from a list of choices. It supports controlled and uncontrolled modes, error display, disabled state, and integration with React Hook Form.

import { RadioButton } from "tawuniya/components";

👉 View in Storybook

---

Props

Prop	Type	Default	Description
options	{ label: string; value: string }[]	—	Array of options to display.
value	string | null	—	Selected value (controlled).
error	string	—	Error message displayed below the radio group.
disabled	boolean	false	Disable all radio buttons.
className	string	—	Additional Tailwind classes for each radio button.
wrapperClassName	string	—	Additional Tailwind classes for the radio button group wrapper.
radioCircleClassName	string	—	Custom Tailwind classes to style the radio circle.
radioCircleDotClassName	string	—	Custom Tailwind classes to style the radio circle dot.
onChange	(val: string | null) => void	—	Callback triggered when selection changes.
form	{ controller: any; control: any; name: string }	—	React Hook Form integration using Controller.

Usage

With Controlled Form

export default function BasicExample() {
  const [value, setValue] = useState<string | null>(null);

  return (
    <RadioButton
      options={[
        { label: "Option 1", value: "1" },
        { label: "Option 2", value: "2" },
      ]}
      value={value}
      onChange={setValue}
    />
  );
}

With Error Message

<RadioButton
  options={[
    { label: "Yes", value: "yes" },
    { label: "No", value: "no" },
  ]}
  error="This field is required"
/>

Disabled State

<RadioButton
  options={[
    { label: "ReactJs", value: "R" },
    { label: "NextJs", value: "N" },
  ]}
  disabled
/>

With React Hook Form

import { useForm, Controller } from "react-hook-form";
import { RadioButton } from "tawuniya/components";

export default function FormExample() {
  const { control, handleSubmit } = useForm({
    defaultValues: { language: "" },
  });

  const onSubmit = (data: any) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <RadioButton
        form={{ controller: Controller, control, name: "language" }}
        options={[
          { label: "Javascript", value: "J" },
          { label: "Php", value: "P" },
        ]}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

Notes

• Works as a controlled component with value + onChange, or with React Hook Form via the form prop.
• Automatically displays error messages below the group.
• Supports disabled state for all buttons.
• Each button visually highlights the selected state and shows a round indicator.