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.

243

<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

2 years ago

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

Author:
Prajwal Hallale

3 years ago

16.7k
Yes / No radio input with reset button

Author:
Kris Showen

2 years ago

10k
Product Form - Reverie

Author:
S V

3 months ago

406
Colored checkboxes
use custom accent color according to your design

Author:
Pixel Perfect

1 year ago

4.5k
Login Form with Icon

Author:
Prashant

2 years ago

16.9k
Multi Range Slider
Adjust the sliders to set your preferred price range. The left slider sets the minimum price, and the right slider sets the maximum price. The selected range is displayed below the sliders in real-time, allowing you to easily filter products within your budget.

Author:
SHARIFUL ISLAM

6 months ago

1.1k
Simple OTP box Form
A Simple OTP form with full responsiveness && dark mode supported

Author:
Shariar Hasan

1 year ago

3k
Stacked Checkboxes

Author:
kishan pc

1 year ago

2.1k
Range slider
Range slider with upper limit and lower limit.

Author:
Alok

2 years ago

11.6k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

2k
Incentives
tailwind css Incentives

Author:
Anonymous

1 year ago

4.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components