Home
Nick Girga
Material 3 Checkboxes [Light]

Material 3 Checkboxes [Light]

Checkboxes 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.

381

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

<input type="checkbox" />

<input type="checkbox" checked />

</div>

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

<input type="checkbox" disabled />

<input type="checkbox" disabled checked />

</div>

<span class="text-lg mt-8">With Label</span>
    
    <label class="flex flex-row items-center gap-2 text-sm select-none">
      <input type="checkbox" checked />
      My Checkbox
    </label>

</div>
</body>

Related Examples

pricing slider with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.7k
flex row

Author:
Yanjun Lin

4 months ago

212
Custom Carosel

Author:
Md. Tofayel islam

1 year ago

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

Author:
Alok

3 years ago

12.2k
Elegant Textboxes
Useful Tailwind classes for creating several types of animated textboxes. Inspired by Google's floating label input fields.

Author:
Nick Girga

7 months ago

610
todo list with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2k
Image input with preview
Show you a preview of the selected image.

Author:
Prajwal Hallale

3 years ago

27.4k
Domain For Sale Template
Domain For Sale Template

Author:
Geoffrey Callaghan

1 year ago

4.1k
Select input

Author:
Sophia Baker

2 years ago

14.2k
Range Slider

Author:
Alok

3 years ago

14.1k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

3.3k
Contact us form
Contact us form

Author:
Geoffrey Callaghan

2 years ago

6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components