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.

162

<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

Stacked Checkboxes

Author:
kishan pc

1 year ago

2k
Accordion block
FAQ accordion component, featuring expandable sections with smooth transitions and a clean, modern design

Author:
Maxim

8 months ago

1.1k
Login
Login form, responsive, no dark-mode for white backgrounds, elegant for any platform

Author:
Ameth Galarcio

1 year ago

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

Author:
Shariar Hasan

1 year ago

2.8k
Colored checkboxes
use custom accent color according to your design

Author:
Pixel Perfect

1 year ago

4.4k
Comment section

Author:
Manuela Bianka

2 years ago

11k
Sign in / Login Form

Author:
Bunny

3 years ago

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

Author:
Alok

2 years ago

11.6k
Checkbox button
press the button to check

Author:
Anonymous

1 year ago

3.8k
Invalid input detected message
incorrect input notification

Author:
Conan Hilton

2 years ago

12k
Select input

Author:
Sophia Baker

2 years ago

13.3k
File input field

Author:
Lyra Ravensong

2 years ago

12.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components