Home
Nick Girga
Elegant Switches

Elegant Switches

Useful Tailwind classes for creating several types of basic switches.

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

Input Toggle switch

Author Nick Girga

608

Fork Fullscreen

<div class="flex flex-row items-center justify-center gap-4 my-8">

<div class="flex flex-col gap-4">

<input class="switch"
      type="checkbox"
      checked=true
      id="switch-0"
    />

<label class="switch-label">
      <input class="switch switch-primary"
        type="checkbox"
        checked=true
        id="switch-1"
      />
      Primary
    </label>

<label class="switch-label">
      <input class="switch switch-secondary"
        type="checkbox"
        checked=true
        id="switch-2"
      />
      Secondary
    </label>

<label class="switch-label">
      <input class="switch switch-info"
        type="checkbox"
        checked=true
        id="switch-3"
      />
      Info
    </label>

</div>

<div class="flex flex-col gap-4">

<label class="switch-label">
      <input class="switch switch-success"
        type="checkbox"
        checked=true
        id="switch-4"
      />
      Success
    </label>

<label class="switch-label">
      <input class="switch switch-warn"
        type="checkbox"
        checked=true
        id="switch-5"
      />
      Warn
    </label>

<label class="switch-label">
      <input class="switch switch-error"
        type="checkbox"
        checked=true
        id="switch-6"
      />
      Error
    </label>

<label class="switch-label text-blue-500">
      <input class="switch after:bg-[var(--color-base-dark)] before:bg-teal-200 checked:before:bg-orange-400"
        type="checkbox"
        checked=true
        id="switch-7"
      />
      Custom
    </label>

</div>

<center>
  <button class="text-base inline-block rounded-lg py-2 px-4 text-center align-middle font-bold ease-in-out duration-200 bg-[var(--color-default)] hover:bg-[var(--color-default-hover)] active:bg-[var(--color-default-active)] text-[var(--color-default-content)]"
    onclick="window.toggleAllSwitches(!window.lastSwitchState)">
      Toggle All Switches
  </button>
</center>

window.toggleAllSwitches = function(value) {
    defaultSwitch.checked = value;
    primarySwitch.checked = value;
    secondarySwitch.checked = value;
    infoSwitch.checked = value;
    successSwitch.checked = value;
    warnSwitch.checked = value;
    errorSwitch.checked = value;
    customSwitch.checked = value;
    window.lastSwitchState = value;
  }
</script>

Related Examples

Toggle button

Author:
Matthew Chen

2 years ago

12.7k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

2.3k
Designing a Responsive Form Layouts with Tailwind CSS
Enhance your web application by building a sleek and responsive Form Layouts using Tailwind CSS. This comprehensive guide walks you through creating an interactive Form Layouts section featuring.

Author:
zobaidul kaziex

1 year ago

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

10 months ago

1.7k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

3.3k
Hover Button
Hover button then a overlay came from bottom to top

Author:
Md. Tofayel islam

1 year ago

2.1k
Material 3 Text Fields [Light]
Text fields that conform to Google's Material 3 design guidelines. Can be used for single-line text fields as well as textareas.

Author:
Nick Girga

7 months ago

778
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

21k
Checkbox button
press the button to check

Author:
Anonymous

1 year ago

4.7k
File input

Author:
Anonymous

2 years ago

7.5k
File upload input section with file preview

Author:
Noob

3 years ago

12.1k
Serious Input Html
Input text serious like apple or smth

Author:
Cristian

1 year ago

2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components