Material 3 Radio Buttons [Light]

Radio buttons that conform to Google's Material 3 design guidelines

This tailwind example is contributed by Nick Girga, on 19-May-2025. Component is made with Tailwind v3.4.

Tailwind v3.4 1.1k 4

<span class="text-lg">Enabled</span>
    <div class="flex flex-row gap-2 items-center">

<input type="radio" name="radio-group-0" />

<input type="radio" name="radio-group-0" checked />

</div>

<span class="text-lg mt-4">Disabled</span>
    <div class="flex flex-row gap-2 items-center">

<input type="radio" disabled />

<input type="radio" disabled checked />

</div>

<span class="text-lg mt-4">With Label</span>
    <div class="flex flex-col gap-2 items-center">

<label class="flex flex-row items-center gap-2 text-sm select-none">
        <input type="radio" name="radio-group-1" checked />
        Option 1
      </label>

<label class="flex flex-row items-center gap-2 text-sm select-none">
        <input type="radio" name="radio-group-1" />
        Option 2
      </label>

<label class="flex flex-row items-center gap-2 text-sm select-none">
        <input type="radio" name="radio-group-1" />
        Option 3
      </label>

</div>

</div>
</body>

Related Examples

Tailwind CSS Radio Button Cards

Prashant

4 years ago

13.1k
Radio Buttons
Users can click anywhere on the input field to select the radio option

Prajwal Hallale

4 years ago

17.1k
Yes / No radio input with reset button

Kris Showen

3 years ago

11.1k
Product Form - Reverie

S V

1 year ago

1.2k
Default phone input

Md. Tofayel islam

2 years ago

3.7k
Stacked Checkboxes

kishan pc

2 years ago

3.9k
time Tailwind CSS and Alpinejs

Hai mmm

2 years ago

2.4k
Pricing Plan Selector
radio buttons for selecting a pricing plan

Mehmet Kaplan

2 years ago

4.4k
Gaming UI Card, Form
A modern, senior-level gaming UI built with Tailwind CSS focusing on spacing, typography, and calm visual hierarchy rather than noisy effects. This component set includes: A premium gaming card with clear content structure and outcome-focused copy A clean player signup form with accessible focus states and minimal visual noise A custom animated button using a restrained light-sweep effect for premium interaction feedback Designed to resemble real production gaming platforms rather than demo or template UI. Fully responsive, copy-paste ready, and easy to extend for real-world projects.

Ayyamperumal S

9 months ago

714
File input field

Lyra Ravensong

3 years ago

14.1k
Custom Date Picker with TailwindCSS and Vanilla JavaScript
A lightweight, responsive date picker built with TailwindCSS for styling and vanilla JavaScript for interactivity. It includes an input field with a calendar dropdown, month navigation, and a “Today” shortcut button. The component is designed to be mobile-friendly, easy to customize, and can be integrated into any project without dependencies like React or external UI libraries.

SHARIFUL ISLAM

1 year ago

1.4k
File input

Anonymous

2 years ago

8.2k