Components
Switch

Basic Forms

Tailwind CSS Switch/Toggle

A toggle is used to view or switch between enabled or disabled states.

Attention needed

By default Preline UI uses Tailwind CSS Forms plugin. Don't forget to install it!

<div class="flex items-center gap-x-3">
                          <label for="hs-basic-with-description-checked" class="relative inline-block w-11 h-6 cursor-pointer">
                            <input type="checkbox" id="hs-basic-with-description-checked" class="peer sr-only" checked>
                            <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                            <span class="absolute top-1/2 start-0.5 -translate-y-1/2 size-5 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                          </label>
                          <label for="hs-basic-with-description-checked" class="text-sm text-muted-foreground-1">Checked</label>
                        </div>

<div class="space-y-4">
                        <div class="flex items-center gap-x-3">
                          <label for="hs-basic-with-description-unchecked" class="relative inline-block w-11 h-6 cursor-pointer">
                            <input type="checkbox" id="hs-basic-with-description-unchecked" class="peer sr-only">
                            <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                            <span class="absolute top-1/2 start-0.5 -translate-y-1/2 size-5 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                          </label>
                          <label for="hs-basic-with-description-unchecked" class="text-sm text-muted-foreground-1">Unchecked</label>
                        </div>

Disabled

Disabled switch.

Theme:

<div class="flex items-center gap-x-3">
                          <label for="hs-basic-disabled-with-description-checked" class="relative inline-block w-11 h-6 cursor-pointer">
                            <input type="checkbox" id="hs-basic-disabled-with-description-checked" class="peer sr-only" disabled checked>
                            <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                            <span class="absolute top-1/2 start-0.5 -translate-y-1/2 size-5 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                          </label>
                          <label for="hs-basic-disabled-with-description-checked" class="text-sm text-muted-foreground-1">Checked</label>
                        </div>

<div class="space-y-4">
                        <div class="flex items-center gap-x-3">
                          <label for="hs-basic-disabled-with-description-unchecked" class="relative inline-block w-11 h-6 cursor-pointer">
                            <input type="checkbox" id="hs-basic-disabled-with-description-unchecked" class="peer sr-only" disabled>
                            <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                            <span class="absolute top-1/2 start-0.5 -translate-y-1/2 size-5 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                          </label>
                          <label for="hs-basic-disabled-with-description-unchecked" class="text-sm text-muted-foreground-1">Unchecked</label>
                        </div>

Sizes

Switches stacked small to large sizes.

Theme:

<div class="flex items-center gap-x-3">
                          <label for="hs-sm-switch" class="relative inline-block w-11 h-6 cursor-pointer">
                            <input type="checkbox" id="hs-sm-switch" class="peer sr-only">
                            <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                            <span class="absolute top-1/2 start-0.5 -translate-y-1/2 size-5 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                          </label>
                          <label for="hs-sm-switch" class="text-sm text-muted-foreground-1">Small</label>
                        </div>

<div class="flex items-center gap-x-3">
                          <label for="hs-md-switch" class="relative inline-block w-13 h-7 cursor-pointer">
                            <input type="checkbox" id="hs-md-switch" class="peer sr-only">
                            <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                            <span class="absolute top-1/2 start-0.5 -translate-y-1/2 size-6 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                          </label>
                          <label for="hs-md-switch" class="text-sm text-muted-foreground-1">Medium</label>
                        </div>

<div class="flex items-center gap-x-3">
                          <label for="hs-lg-switch" class="relative inline-block w-15 h-8 cursor-pointer">
                            <input type="checkbox" id="hs-lg-switch" class="peer sr-only">
                            <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                            <span class="absolute top-1/2 start-0.5 -translate-y-1/2 size-7 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                          </label>
                          <label for="hs-lg-switch" class="text-sm text-muted-foreground-1">Large</label>
                        </div>
                      </div>
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.0"></script>
                        </body>
                      </html>

<div class="space-y-4">
                        <div class="flex items-center gap-x-3">
                          <label for="hs-xs-switch" class="relative inline-block w-9 h-5 cursor-pointer">
                            <input type="checkbox" id="hs-xs-switch" class="peer sr-only">
                            <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                            <span class="absolute top-1/2 start-0.5 -translate-y-1/2 size-4 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                          </label>
                          <label for="hs-xs-switch" class="text-sm text-muted-foreground-1">Extra small</label>
                        </div>

With Icons

You can also add additional elements, such as icons.

Theme:

Soft color variant

Soft style switch options.

Theme:

Shape

Rounded

Use the .rounded-* utility classes to make switches different rounded shape.

Theme:

<div class="flex items-center gap-x-3">
                          <label for="hs-sm-switch" class="relative inline-block w-11 h-6 cursor-pointer">
                            <input type="checkbox" id="hs-sm-switch" class="peer sr-only">
                            <span class="absolute inset-0 bg-surface-1 rounded-sm transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                            <span class="absolute top-1/2 start-0.5 -translate-y-1/2 size-5 bg-switch rounded-xs shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                          </label>
                          <label for="hs-sm-switch" class="text-sm text-muted-foreground-1">Small</label>
                        </div>

<div class="flex items-center gap-x-3">
                          <label for="hs-md-switch" class="relative inline-block w-13 h-7 cursor-pointer">
                            <input type="checkbox" id="hs-md-switch" class="peer sr-only">
                            <span class="absolute inset-0 bg-surface-1 rounded-md transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                            <span class="absolute top-1/2 start-0.5 -translate-y-1/2 size-6 bg-switch rounded-sm shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                          </label>
                          <label for="hs-md-switch" class="text-sm text-muted-foreground-1">Medium</label>
                        </div>

<div class="flex items-center gap-x-3">
                          <label for="hs-lg-switch" class="relative inline-block w-15 h-8 cursor-pointer">
                            <input type="checkbox" id="hs-lg-switch" class="peer sr-only">
                            <span class="absolute inset-0 bg-surface-1 rounded-lg transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                            <span class="absolute top-1/2 start-0.5 -translate-y-1/2 size-7 bg-switch rounded-md shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                          </label>
                          <label for="hs-lg-switch" class="text-sm text-muted-foreground-1">Large</label>
                        </div>
                      </div>
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.0"></script>
                        </body>
                      </html>

<div class="space-y-4">
                        <div class="flex items-center gap-x-3">
                          <label for="hs-xs-switch" class="relative inline-block w-9 h-5 cursor-pointer">
                            <input type="checkbox" id="hs-xs-switch" class="peer sr-only">
                            <span class="absolute inset-0 bg-surface-1 transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                            <span class="absolute top-1/2 start-0.5 -translate-y-1/2 size-4 bg-switch shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                          </label>
                          <label for="hs-xs-switch" class="text-sm text-muted-foreground-1">Squared</label>
                        </div>

<div class="flex items-center gap-x-3">
                          <label for="hs-sm-switch" class="relative inline-block w-11 h-6 cursor-pointer">
                            <input type="checkbox" id="hs-sm-switch" class="peer sr-only">
                            <span class="absolute inset-0 bg-surface-1 rounded-sm transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                            <span class="absolute top-1/2 start-0.5 -translate-y-1/2 size-5 bg-switch rounded-xs shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                          </label>
                          <label for="hs-sm-switch" class="text-sm text-muted-foreground-1">Small</label>
                        </div>

<div class="flex items-center gap-x-3">
                          <label for="hs-md-switch" class="relative inline-block w-13 h-7 cursor-pointer">
                            <input type="checkbox" id="hs-md-switch" class="peer sr-only">
                            <span class="absolute inset-0 bg-surface-1 rounded-md transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                            <span class="absolute top-1/2 start-0.5 -translate-y-1/2 size-6 bg-switch rounded-sm shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                          </label>
                          <label for="hs-md-switch" class="text-sm text-muted-foreground-1">Medium</label>
                        </div>

<div class="flex items-center gap-x-3">
                          <label for="hs-lg-switch" class="relative inline-block w-15 h-8 cursor-pointer">
                            <input type="checkbox" id="hs-lg-switch" class="peer sr-only">
                            <span class="absolute inset-0 bg-surface-1 rounded-lg transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                            <span class="absolute top-1/2 start-0.5 -translate-y-1/2 size-7 bg-switch rounded-md shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                          </label>
                          <label for="hs-lg-switch" class="text-sm text-muted-foreground-1">Large</label>
                        </div>
                      </div>

With icons too.

Theme:

<!DOCTYPE html>
                      <html lang="en" dir="" class="relative min-h-full h-full">
                        <head>
                          <meta charset="utf-8">
                          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                          <title>Preline UI</title>
                          <link rel="shortcut icon" href="../favicon.ico">
                          <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                          <link rel="stylesheet" href="../assets/css/main.min.css">
                        </head>
                        <body class="w-full max-w-xs mx-auto mt-17"><div class="flex flex-wrap items-center gap-5">
                        <div class="flex items-center">
                          <label for="hs-small-soft-switch-with-icons" class="relative inline-block w-11 h-6 cursor-pointer">
                            <input type="checkbox" id="hs-small-soft-switch-with-icons" class="peer sr-only">
                            <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-100 dark:peer-checked:bg-primary-800 peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                            <span class="absolute top-1/2 start-0.5 -translate-y-1/2 size-5 bg-plain rounded-full shadow-xs transition-transform duration-200 ease-in-out peer-checked:bg-primary-checked peer-checked:translate-x-full"></span>
                            
                            <span class="absolute top-1/2 start-0.5 -translate-y-1/2 flex justify-center items-center size-5 text-muted-foreground-1 peer-checked:text-primary-checked transition-colors duration-200">
                              <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                            </span>
                            
                            <span class="absolute top-1/2 end-0.5 -translate-y-1/2 flex justify-center items-center size-5 text-muted-foreground-1 peer-checked:text-foreground-inverse transition-colors duration-200">
                              <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </span>
                          </label>
                        </div>

In this example we have added a tooltip to the switcher.

<div class="flex flex-wrap items-center gap-5">
                        <div class="hs-tooltip flex items-center gap-x-3">
                          <label for="hs-tooltip-example" class="hs-tooltip-toggle relative inline-block w-11 h-6 cursor-pointer">
                            <input type="checkbox" id="hs-tooltip-example" class="peer sr-only">
                            <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                            <span class="absolute top-1/2 start-0.5 -translate-y-1/2 size-5 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                          </label>
                          <label for="hs-tooltip-example" class="text-sm text-muted-foreground-1">Allow push notifications</label>
                          <div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md" role="tooltip">
                            Enable push notifications
                          </div>
                        </div>
                      </div>

Validation states

It provides valuable, actionable feedback to your users with HTML5 form validation.

Theme:

<div class="flex items-center gap-x-3">
                          <label for="hs-invalid-toggle-switch" class="relative inline-block w-11 h-6 cursor-pointer">
                            <input type="checkbox" id="hs-invalid-toggle-switch" class="peer sr-only" checked>
                            <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-red-600 dark:peer-checked:bg-red-500 peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                            <span class="absolute top-1/2 start-0.5 -translate-y-1/2 size-5 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                          </label>
                          <label for="hs-invalid-toggle-switch" class="text-sm text-red-500">Invalid switch</label>
                        </div>
                      </div>
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.0"></script>
                        </body>
                      </html>

<div class="flex flex-wrap items-center gap-5">
                        <div class="flex items-center gap-x-3">
                          <label for="hs-valid-toggle-switch" class="relative inline-block w-11 h-6 cursor-pointer">
                            <input type="checkbox" id="hs-valid-toggle-switch" class="peer sr-only" checked>
                            <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-teal-600 dark:peer-checked:bg-teal-500 peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                            <span class="absolute top-1/2 start-0.5 -translate-y-1/2 size-5 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                          </label>
                          <label for="hs-valid-toggle-switch" class="text-sm text-teal-500">Valid switch</label>
                        </div>

Tailwind CSS Switch/Toggle

Attention needed

Basic usage

Example

With description

Disabled

Sizes

With Icons

Soft color variant

Shape

Rounded

With tooltip

Validation states

On this page