Home
Nick Girga
Material 3 Switches [Light]

Material 3 Switches [Light]

Switches that conform to Google's Material 3 design guidelines

This tailwind example is contributed by Nick Girga, on 18-May-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Toggle switch

Author Nick Girga

193

Fork Fullscreen

<h1 class="text-lg">Disabled Switch</h1>

<h1 class="text-lg mt-8">Basic Switch</h1>

<h1 class="text-lg mt-8">Icon Switch</h1>

<div class="relative">
      <input type="checkbox" class="peer switch" />
      <span class="material-symbols-outlined switch-icon switch-icon-off text-red-100 !text-xs">close</span>
      <span class="material-symbols-outlined switch-icon switch-icon-on text-green-600 !text-base">check</span>
    </div>

<div class="relative">
      <input type="checkbox" checked class="peer switch" />
      <span class="material-symbols-outlined switch-icon switch-icon-off text-red-100 !text-xs">close</span>
      <span class="material-symbols-outlined switch-icon switch-icon-on text-green-600 !text-base">check</span>
    </div>

<h1 class="text-lg mt-8">Labeled Switch</h1>
    <label class="switch-label">
      <input type="checkbox" class="switch" checked />
      My Switch
    </label>

<h1 class="text-lg mt-8">Custom Switch</h1>
    <input type="checkbox" checked class="switch before:border-0 before:bg-[var(--color-error)] checked:before:bg-green-500 after:bg-[var(--color-surface)] hover:after:drop-shadow-[0_0_5px_var(--color-error)] hover:checked:after:drop-shadow-[0_0_5px_rgba(0,128,51,0.75)] checked:after:scale-[150%]" />

</div>
</body>

Related Examples

Responsive Pricing Table with Toggle Switch — Built with Tailwind Flex
A clean, responsive Pricing Table UI built entirely with Tailwind CSS and Flexbox. Includes a smooth monthly/yearly toggle switch, fully mobile-friendly layout, and modern design — perfect for SaaS, startups, freelancers, or any web project. 📱 100% Responsive 🎯 Easily customizable 💡 Ideal for client or personal projects

Author:
Muhammad Umair Arshad

3 months ago

329
Neumorphic Toggle Switch

Author:
Anonymous

7 months ago

1.1k
Interactive Toggle Switch with Smooth Animation
A stylish toggle switch component built with Tailwind CSS and enhanced with minimal JavaScript. This toggle switch features smooth color transitions, dynamic text ("ON/OFF"), and a moving indicator ball, providing a visually appealing and functional design. Ideal for modern web interfaces where toggling functionality is required. Easily customizable for various use cases.

Author:
SHARIFUL ISLAM

5 months ago

993
Elegant toggle switch

Author:
kishan pc

1 year ago

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

Author:
Nick Girga

2 months ago

229
Dark mode toggle button
Switch to dark mode without any hassle with this simple JavaScript hack. Sun night button

Author:
Nishant Trivedi

1 year ago

19.4k
Button group
Add active class to clicked button using JavaScript

Author:
TailwindFlex

2 years ago

10.3k
Toggle switch
toggle switch with smooth animation

Author:
Dika Rahman

1 year ago

3.2k
Toggle button

Author:
Matthew Chen

1 year ago

12.1k
Switch tabs button

Author:
gmer33

2 years ago

15.3k
Toggle me Animated Switch

Author:
Anonymous

7 months ago

781
Toggle Switch
Toggle switch for dark mode

Author:
Charlotte Dupont

2 years ago

15.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components