Home > Tailwind Components > Radio Buttons

Tailwind CSS Radio Buttons

To use these form components, remember to:

1. Install the official Tailwind CSS forms plugin using:

npm install -D @tailwindcss/forms

2. Add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
    theme: {
    // ...
    },
    plugins: [
    require('@tailwindcss/forms'),
    // ...
    ],
}

Radio Buttons Horizontal Group

Option 1 Option 2 Option 3

<div class="flex space-x-4">
  <label class="inline-flex items-center">
    <input type="radio" class="form-radio" name="option" value="1">
    <span class="ml-2">Option 1</span>
  </label>
  <label class="inline-flex items-center">
    <input type="radio" class="form-radio" name="option" value="2">
    <span class="ml-2">Option 2</span>
  </label>
  <label class="inline-flex items-center">
    <input type="radio" class="form-radio" name="option" value="3">
    <span class="ml-2">Option 3</span>
  </label>
</div>

Radio Buttons Vertical Group

Option 1 Option 2 Option 3

<div class="flex flex-col space-y-2">
  <label class="inline-flex items-center">
    <input type="radio" class="form-radio" name="vertical-option" value="1">
    <span class="ml-2">Option 1</span>
  </label>
  <label class="inline-flex items-center">
    <input type="radio" class="form-radio" name="vertical-option" value="2">
    <span class="ml-2">Option 2</span>
  </label>
  <label class="inline-flex items-center">
    <input type="radio" class="form-radio" name="vertical-option" value="3">
    <span class="ml-2">Option 3</span>
  </label>
</div>

Radio Button Color

Purple Green Red

<div class="flex space-x-4">
  <label class="inline-flex items-center">
    <input type="radio" class="form-radio text-purple-600 focus:ring-2 focus:ring-purple-600" name="color-option" value="1">
    <span class="ml-2">Purple</span>
  </label>
  <label class="inline-flex items-center">
    <input type="radio" class="form-radio text-green-600 focus:ring-2 focus:ring-green-600" name="color-option" value="2">
    <span class="ml-2">Green</span>
  </label>
  <label class="inline-flex items-center">
    <input type="radio" class="form-radio text-red-600 focus:ring-2 focus:ring-red-600" name="color-option" value="3">
    <span class="ml-2">Red</span>
  </label>
</div>