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.

<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

Upvote downvote buttons [alpine]
upvote and downvote buttons made as working version in alpine.js

Author:
Anonymous

1 year ago

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

3 months ago

880
Profile Form
Profile form for taking user inputs

Author:
TailwindFlex

2 years ago

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

Author:
Prajwal Hallale

2 years ago

26.3k
Material 3 Text Fields [Light]
Text fields that conform to Google's Material 3 design guidelines

Author:
Nick Girga

5 days ago

11
time Tailwind CSS and Alpinejs

Author:
Hai mmm

7 months ago

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

Author:
Ameth Galarcio

10 months ago

3.3k
Sign in / Login Form

Author:
Bunny

2 years ago

12.7k
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.3k
Elegant Switches
Useful Tailwind classes for creating several types of basic switches.

Author:
Nick Girga

1 month ago

56
Hover Button
Hover button then a overlay came from bottom to top

Author:
Md. Tofayel islam

8 months ago

1.7k
Responsive Footer Section
This modern and responsive footer adapts seamlessly to all screen sizes, ensuring a clean and organized layout. It includes essential navigation links, contact details, and a subscription form, all structured for easy access. Using display: contents;, the design remains flexible and visually balanced, enhancing the user experience across devices.

Author:
ABDO-SY

2 months ago

170

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components