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.

175

<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

File input field

Author:
Lyra Ravensong

2 years ago

12.9k
Large File upload input

Author:
Akshay

2 years ago

14.2k
Drag and drop image upload with image preview

Author:
Santos78

2 years ago

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

Author:
Ameth Galarcio

1 year ago

2.1k
Input field with logo
Logo on the left side of the input field

Author:
Conan Hilton

2 years ago

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

Author:
Pixel Perfect

1 year ago

4.8k
Maintenance mode

Author:
Maxim

1 year ago

3.6k
Elegant OTP Input Fields with TailwindCSS
A clean and responsive OTP input field component built with TailwindCSS. This design features six single-character input fields with smooth transitions, light gray borders, and backgrounds. On focus, the borders turn blue, creating a visually appealing and user-friendly experience. Perfect for authentication and verification forms.

Author:
SHARIFUL ISLAM

7 months ago

1.1k
Tailwind CSS Radio Button Cards

Author:
Prashant

3 years ago

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

Author:
Michael Andreuzza

1 year ago

2.6k
Textarea input
Fancy Textarea

Author:
Piet Vriend

2 years ago

10.6k
Default phone input

Author:
Md. Tofayel islam

1 year ago

2.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components