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.

310

<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

Login form

Author:
Gopi Yadav

3 years ago

11.1k
Checkbox button
press the button to check

Author:
Anonymous

1 year ago

4.5k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

2.1k
File Upload

Author:
Rajesh Maheshwari

8 months ago

933
File upload input box

Author:
Mohit Prajapati

3 years ago

14.5k
Material 3 Text Fields [Light]
Text fields that conform to Google's Material 3 design guidelines. Can be used for single-line text fields as well as textareas.

Author:
Nick Girga

5 months ago

703
Incentives
tailwind css Incentives

Author:
Anonymous

1 year ago

5.1k
Domain For Sale Template
Domain For Sale Template

Author:
Geoffrey Callaghan

1 year ago

4k
File input

Author:
Anonymous

1 year ago

7.2k
Toggle button

Author:
Matthew Chen

2 years ago

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

Author:
Nick Girga

6 months ago

450
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.

Author:
SHARIFUL ISLAM

2 months ago

292

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components