Home
Nick Girga
Material 3 Radio Buttons [Light]

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 CSS v3.

412

<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

Author:
Prashant

3 years ago

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

Author:
Prajwal Hallale

3 years ago

16.8k
Yes / No radio input with reset button

Author:
Kris Showen

2 years ago

10.3k
Product Form - Reverie

Author:
S V

5 months ago

510
floting input

Author:
Md. Tofayel islam

1 year ago

2.6k
Incentives
tailwind css Incentives

Author:
Anonymous

1 year ago

5k
Search bar with icon

Author:
Steven Kuhn

3 years ago

14.8k
Elegant OTP Input Fields with TailwindCSS
A clean and responsive OTP input field component built with TailwindCSS. This design features six single-character input fields with smooth transitions, light gray borders, and backgrounds. On focus, the borders turn blue, creating a visually appealing and user-friendly experience. Perfect for authentication and verification forms.

Author:
SHARIFUL ISLAM

8 months ago

1.2k
Large File upload input

Author:
Akshay

3 years ago

14.3k
Input field with logo
Logo on the left side of the input field

Author:
Conan Hilton

3 years ago

10.6k
Designing a Responsive Form Layouts with Tailwind CSS
Enhance your web application by building a sleek and responsive Form Layouts using Tailwind CSS. This comprehensive guide walks you through creating an interactive Form Layouts section featuring.

Author:
zobaidul kaziex

1 year ago

2.6k
Float Input

Author:
Maxim

1 year ago

4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components