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

375

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

Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

3 months ago

340
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

6 months ago

1.1k
Switch tabs button

Author:
gmer33

2 years ago

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

Author:
Nick Girga

3 months ago

298
Elegant toggle switch

Author:
kishan pc

1 year ago

1.7k
Neumorphic Toggle Switch

Author:
Anonymous

8 months ago

1.3k
Animated toggle switch

Author:
Samuel Dawson

2 years ago

15.1k
Toggle me Animated Switch

Author:
Anonymous

8 months ago

823
Button group
Add active class to clicked button using JavaScript

Author:
TailwindFlex

2 years ago

10.4k
Toggle switch
toggle switch with smooth animation

Author:
Dika Rahman

1 year ago

3.3k
Toggle button

Author:
Matthew Chen

2 years ago

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

4 months ago

618

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components