Tailwind CSS React Radio

Our Tailwind CSS React radio button component will let your users choose only one of a predefined set of mutually exclusive options. Radio buttons should be used instead of checkboxes if only one item can be selected from a list.

import Radio from "components/Radio";
 
export default function Example() {
  return (
    <div className="flex gap-10">
      <Radio id="html" name="type" label="HTML" />
      <Radio id="react" name="type" label="React" defaultChecked />
    </div>
  );
}

Radio Button Colors

The Radio component comes with 15 different colors that you can change it using the color prop.

import Radio from "components/Radio";
 
export default function Colors() {
  return (
    <div className="flex w-max gap-4">
      <Radio id="blue" name="color" color="blue" defaultChecked />
      <Radio id="red" name="color" color="red" />
      <Radio id="green" name="color" color="green" />
      <Radio id="amber" name="color" color="amber" />
      <Radio id="teal" name="color" color="teal" />
      <Radio id="indigo" name="color" color="indigo" />
      <Radio id="purple" name="color" color="purple" />
      <Radio id="pink" name="color" color="pink" />
    </div>
  );
}

Tailwind CSS React Radio Button - Horizon UI

Radio Button Colors