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

468

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

Checkbox models
Tailwind Checkbox models

Author:
QQ-VVN

4 months ago

527
Toggle me Animated Switch

Author:
Anonymous

9 months ago

895
Neumorphic Toggle Switch

Author:
Anonymous

9 months ago

1.4k
Toggle button

Author:
Matthew Chen

2 years ago

12.4k
Switch tabs button

Author:
gmer33

2 years ago

15.6k
Toggle switch
toggle switch with smooth animation

Author:
Dika Rahman

1 year ago

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

Author:
Nick Girga

4 months ago

310
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

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

Author:
TailwindFlex

2 years ago

10.4k
Elegant toggle switch

Author:
kishan pc

1 year ago

1.8k
Animated toggle switch

Author:
Samuel Dawson

2 years ago

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

4 months ago

473

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components