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

921

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

Elegant toggle switch

Author:
kishan pc

1 year ago

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

10 months ago

872
Animated toggle switch

Author:
Samuel Dawson

3 years ago

16.1k
Checkbox models
Tailwind Checkbox models

Author:
QQ-VVN

10 months ago

1.1k
Toggle button

Author:
Matthew Chen

2 years ago

12.9k
Toggle switch
toggle switch with smooth animation

Author:
Dika Rahman

1 year ago

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

Author:
Nick Girga

10 months ago

795
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

1 year ago

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

Author:
Nishant Trivedi

2 years ago

21.6k
Toggle Switch
Toggle switch for dark mode

Author:
Charlotte Dupont

3 years ago

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

Author:
TailwindFlex

3 years ago

10.8k
Switch tabs button

Author:
gmer33

2 years ago

16.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components