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 1.1k 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

Stacked Checkboxes

kishan pc

2 years ago

3.9k
Console like input field

Charlotte Dupont

3 years ago

12.3k
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.

SHARIFUL ISLAM

1 year ago

2.3k
Textarea

Ron Hicks

3 years ago

12.7k
Custom Date Picker with TailwindCSS and Vanilla JavaScript
A lightweight, responsive date picker built with TailwindCSS for styling and vanilla JavaScript for interactivity. It includes an input field with a calendar dropdown, month navigation, and a “Today” shortcut button. The component is designed to be mobile-friendly, easy to customize, and can be integrated into any project without dependencies like React or external UI libraries.

SHARIFUL ISLAM

1 year ago

1.5k
Incentives
tailwind css Incentives

Anonymous

2 years ago

6k
Search input asasasas
sasasasasas

Notify ahmedabad

2 years ago

1.8k
Login form

Gopi Yadav

4 years ago

12.1k
File upload input box

Mohit Prajapati

4 years ago

15.3k
File input

Anonymous

2 years ago

8.2k
Email input

Sophia Baker

3 years ago

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

Ameth Galarcio

2 years ago

5.3k