Docs
Basic Forms
Switch

Tailwind CSS Switch/Toggle

Build Tailwind CSS switch and toggle components with descriptions, disabled states, icons, tooltips, colors, rounded shapes, sizes, and form validation.

Heads up!

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

Default switch

Use the default switch to toggle a single setting on or off.

Switch with description

Pair a switch with supporting text when the setting needs a little more context.

<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 inset-s-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 inset-s-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 switch

Disable a switch to show a setting that is unavailable or read-only.

<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 inset-s-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 inset-s-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>

Switch sizes

Scale the switch from compact to large sizes to fit different interfaces.

<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 inset-s-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 inset-s-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 inset-s-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.2.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 inset-s-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>

Switch with icons

Add icons inside the switch to make the on and off states easier to scan.

Soft color variants

Use softer color treatments for a lower-contrast switch style.

Shape variants

Corner radius

Adjust the corner radius to create squared, slightly rounded, or more pill-like switches.

<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 inset-s-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 inset-s-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 inset-s-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.2.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 inset-s-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 inset-s-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 inset-s-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 inset-s-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>

Rounded with icons

Combine rounded switch styles with icons inside the track for clearer on and off states.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" 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 inset-s-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 inset-s-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 inset-e-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>

Attach a tooltip when the setting needs extra context without adding persistent copy.

<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 inset-s-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

Show valid and invalid states to give clear feedback when a switch is required in a form.

<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 inset-s-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.2.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 inset-s-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>