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.

189

<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.6k
Radio Buttons
Users can click anywhere on the input field to select the radio option

Author:
Prajwal Hallale

2 years ago

16.7k
Yes / No radio input with reset button

Author:
Kris Showen

2 years ago

9.9k
Product Form - Reverie

Author:
S V

2 months ago

323
File upload input box

Author:
Mohit Prajapati

2 years ago

13.9k
File Upload

Author:
Rajesh Maheshwari

4 months ago

564
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

Author:
SHARIFUL ISLAM

5 months ago

664
Hover Button
Hover button then a overlay came from bottom to top

Author:
Md. Tofayel islam

9 months ago

1.8k
File Upload
Image or file upload card

Author:
Khalid

1 year ago

3k
Input Formulario
Input used in the form Link form: https://tailwindflex.com/@ameth1208/login

Author:
Ameth Galarcio

1 year ago

1.9k
Responsive Footer Section
This modern and responsive footer adapts seamlessly to all screen sizes, ensuring a clean and organized layout. It includes essential navigation links, contact details, and a subscription form, all structured for easy access. Using display: contents;, the design remains flexible and visually balanced, enhancing the user experience across devices.

Author:
ABDO-SY

3 months ago

402
test2

Author:
SHAHAD EIDAH ALHAERTHI

10 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components