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

Tailwind v3.4 993 2

<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

test1 اصلي

SHAHAD EIDAH ALHAERTHI

2 years ago

2.6k
Checkbox button
press the button to check

Anonymous

2 years ago

5.4k
Date picker
Date picker example using flatpickr library

Lîmåã M

3 years ago

18.2k
Search input with Tailwind CSS and Alpinejs
How to create a search input with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

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

Alok

4 years ago

13.1k
Email input

Sophia Baker

3 years ago

11.8k
Elegant Switches
Useful Tailwind classes for creating several types of basic switches.

Nick Girga

1 year ago

986
tailwind contact form
tailwind contact form

Geoffrey Callaghan

2 years ago

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

Ameth Galarcio

2 years ago

3.4k
File upload form

Lukas Müller

3 years ago

14.6k
Custom Carosel

Md. Tofayel islam

2 years ago

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

Nick Girga

1 year ago

1.2k