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.

468

<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

Image input with preview
Show you a preview of the selected image.

Author:
Prajwal Hallale

3 years ago

27.5k
test2

Author:
SHAHAD EIDAH ALHAERTHI

1 year ago

1.7k
Material 3 Radio Buttons [Light]
Radio buttons that conform to Google's Material 3 design guidelines

Author:
Nick Girga

8 months ago

640
Search input asasasas
sasasasasas

Author:
Notify ahmedabad

1 year ago

1.5k
Search input

Author:
Leon Bachmann

3 years ago

10.9k
Contact us form
Contact us form

Author:
Geoffrey Callaghan

2 years ago

6.2k
Radio Buttons
Users can click anywhere on the input field to select the radio option

Author:
Prajwal Hallale

3 years ago

17k
Onhover Dropdown
Open dropdown on hover

Author:
Akshay

3 years ago

18.3k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

2.3k
Toggle button

Author:
Matthew Chen

2 years ago

12.8k
Stacked Checkboxes

Author:
kishan pc

1 year ago

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

4 months ago

462

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components