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.

<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

Onhover Dropdown
Open dropdown on hover

Author:
Akshay

2 years ago

17.3k
Console like input field

Author:
Charlotte Dupont

2 years ago

11.1k
Google like input field
with Floating Label. The input placeholder floats towards the upside as the input field is in focus.

Author:
Samuel Dawson

2 years ago

16.6k
bardui.com badge

Author:
Muhammad Imran

8 months ago

1.3k
Serious Input Html
Input text serious like apple or smth

Author:
Cristian

1 year ago

1.6k
test2

Author:
SHAHAD EIDAH ALHAERTHI

9 months ago

1.2k
Email input

Author:
Sophia Baker

2 years ago

10.5k
Sign in / Login Form

Author:
Bunny

2 years ago

12.7k
time Tailwind CSS and Alpinejs

Author:
Hai mmm

8 months ago

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

Author:
Ameth Galarcio

11 months ago

1.7k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

2.6k
File upload

Author:
Laurits

2 years ago

12k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components