forms
Tailwind CSS Switch
Utilize the switch component to toggle between two states (true or false) with a single click. The component comes in multiple sizes, variants, and colors.
Class Name | Type | Description |
|---|---|---|
| switch | Component | Component class for switch. |
| switch-outline | Component | Component class outline switch. |
| form-control | Component | Container element. |
| label | Component | For helper text. |
| switch-primary | Modifier | Adds ‘primary’ color to switch. |
| switch-secondary | Modifier | Adds ‘secondary’ color to switch. |
| switch-accent | Modifier | Adds ‘accent’ color to switch. |
| switch-info | Modifier | Adds ‘info’ color to switch. |
| switch-success | Modifier | Adds ‘success’ color to switch. |
| switch-warning | Modifier | Adds ‘warning’ color to switch. |
| switch-error | Modifier | Adds ’error’ color to switch. |
| is-valid | Modifier | Adds success style to the input. |
| is-invalid | Modifier | Adds error style to the input. |
| switch-xs | Responsive | Switch with extra small size. |
| switch-sm | Responsive | Switch with small size. |
| switch-lg | Responsive | Switch with large size. |
Basic Switch example.
<label class="form-control flex items-center gap-1">
<input type="checkbox" class="switch" />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-base">Default</span>
</span>
</label>
<label class="form-control flex items-center gap-1">
<input type="checkbox" class="switch" checked />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-base">Checked</span>
</span>
</label>For a switch style, apply the switch component class, whereas the default switch appearance is set to a solid color.
<label class="form-control flex items-center gap-1">
<input type="checkbox" class="switch switch-primary" />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-base">Default</span>
</span>
</label>
<label class="form-control flex items-center gap-1">
<input type="checkbox" class="switch switch-primary" checked />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-base">Checked</span>
</span>
</label>To achieve an outline style for the switch, add component class switch-outline alongside switch.
<label class="form-control flex items-center gap-1">
<input type="checkbox" class="switch switch-outline switch-primary" />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-base">Default</span>
</span>
</label>
<label class="form-control flex items-center gap-1">
<input type="checkbox" class="switch switch-outline switch-primary" checked />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-base">Checked</span>
</span>
</label>Example of semantic color in default and outline switch.
Solid switch with semantic-color using switch-{semantic-color} modifier class with the component class switch.
<label class="form-control flex items-center gap-1">
<input type="checkbox" class="switch" checked />
<span class="label cursor-pointer flex-col items-start">
<span class="text-base-content/90 text-base">Default</span>
</span>
</label>
<label class="form-control flex items-center gap-1">
<input type="checkbox" class="switch switch-primary" checked />
<span class="label cursor-pointer flex-col items-start">
<span class="text-base-content/90 text-base">Primary</span>
</span>
</label>
<label class="form-control flex items-center gap-1">
<input type="checkbox" class="switch switch-secondary" checked />
<span class="label cursor-pointer flex-col items-start">
<span class="text-base-content/90 text-base">Secondary</span>
</span>
</label>
<label class="form-control flex items-center gap-1">
<input type="checkbox" class="switch switch-accent" checked />
<span class="label cursor-pointer flex-col items-start">
<span class="text-base-content/90 text-base">Accent</span>
</span>
</label>
<label class="form-control flex items-center gap-1">
<input type="checkbox" class="switch switch-info" checked />
<span class="label cursor-pointer flex-col items-start">
<span class="text-base-content/90 text-base">Info</span>
</span>
</label>
<label class="form-control flex items-center gap-1">
<input type="checkbox" class="switch switch-success" checked />
<span class="label cursor-pointer flex-col items-start">
<span class="text-base-content/90 text-base">Success</span>
</span>
</label>
<label class="form-control flex items-center gap-1">
<input type="checkbox" class="switch switch-warning" checked />
<span class="label cursor-pointer flex-col items-start">
<span class="text-base-content/90 text-base">Warning</span>
</span>
</label>
<label class="form-control flex items-center gap-1">
<input type="checkbox" class="switch switch-error" checked />
<span class="label cursor-pointer flex-col items-start">
<span class="text-base-content/90 text-base">Error</span>
</span>
</label>Outline switch with semantic-color using switch-{semantic-color} modifier class with component classes switch & switch-outline.
<label class="form-control flex items-center gap-1">
<input type="checkbox" class="switch switch-outline" checked />
<span class="label cursor-pointer flex-col items-start">
<span class="text-base-content/90 text-base">Default</span>
</span>
</label>
<label class="form-control flex items-center gap-1">
<input type="checkbox" class="switch switch-outline switch-primary" checked />
<span class="label cursor-pointer flex-col items-start">
<span class="text-base-content/90 text-base">Primary</span>
</span>
</label>
<label class="form-control flex items-center gap-1">
<input type="checkbox" class="switch switch-outline switch-secondary" checked />
<span class="label cursor-pointer flex-col items-start">
<span class="text-base-content/90 text-base">Secondary</span>
</span>
</label>
<label class="form-control flex items-center gap-1">
<input type="checkbox" class="switch switch-outline switch-accent" checked />
<span class="label cursor-pointer flex-col items-start">
<span class="text-base-content/90 text-base">Accent</span>
</span>
</label>
<label class="form-control flex items-center gap-1">
<input type="checkbox" class="switch switch-outline switch-info" checked />
<span class="label cursor-pointer flex-col items-start">
<span class="text-base-content/90 text-base">Info</span>
</span>
</label>
<label class="form-control flex items-center gap-1">
<input type="checkbox" class="switch switch-outline switch-success" checked />
<span class="label cursor-pointer flex-col items-start">
<span class="text-base-content/90 text-base">Success</span>
</span>
</label>
<label class="form-control flex items-center gap-1">
<input type="checkbox" class="switch switch-outline switch-warning" checked />
<span class="label cursor-pointer flex-col items-start">
<span class="text-base-content/90 text-base">Warning</span>
</span>
</label>
<label class="form-control flex items-center gap-1">
<input type="checkbox" class="switch switch-outline switch-error" checked />
<span class="label cursor-pointer flex-col items-start">
<span class="text-base-content/90 text-base">Error</span>
</span>
</label>Example of custom color in default and outline switch.
The bg-{color} utility class within the Solid utility set assigns a color to the knob, while the var(--tglbg) variable determines the background color for the switch. var(--tglbg) can represent various color specifications, including Tailwind color variables, color names, hexadecimal codes, or theme CSS variables.
<label class="form-control flex items-center gap-1">
<input type="checkbox" class="switch bg-purple-100 [--tglbg:#9b59b6]" />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-base">Hex code</span>
</span>
</label>
<label class="form-control flex items-center gap-1">
<input type="checkbox" class="switch bg-green-100 [--tglbg:green]" />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-base">Named color</span>
</span>
</label>
<label class="form-control flex items-center gap-1">
<input type="checkbox" class="switch bg-accent/50 [--tglbg:oklch(var(--n))]" />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-base">UI color CSS variable</span>
</span>
</label>
<label class="form-control flex items-center gap-1">
<input type="checkbox" class="switch bg-blue-100 [--tglbg:theme(colors.blue.600)]" />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-base">Tailwind colors</span>
</span>
</label>To customize the outline switch, simply modify the bg and border color properties.
<label class="form-control flex items-center gap-1">
<input type="checkbox" class="switch switch-outline border-red-600 bg-blue-600 checked:bg-blue-400" />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-base">Custom color</span>
</span>
</label>The switch is available in three sizes: switch-xs for extra small, switch-sm for small, the default size, and switch-lg for large.
<label class="form-control flex items-center">
<input type="checkbox" class="switch switch-xs switch-primary" checked />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-xs">Extra small switch</span>
</span>
</label>
<label class="form-control flex items-center gap-0.5">
<input type="checkbox" class="switch switch-sm switch-primary" checked />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-sm">Small switch</span>
</span>
</label>
<label class="form-control flex items-center gap-1">
<input type="checkbox" class="switch switch-primary" checked />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-base">Default switch</span>
</span>
</label>
<label class="form-control flex items-center gap-1.5">
<input type="checkbox" class="switch switch-lg switch-primary" checked />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-lg">Large switch</span>
</span>
</label>The switch is available in three sizes: switch-xs for extra small, switch-sm for small, the default size, and switch-lg for large.
<label class="form-control flex items-center">
<input type="checkbox" class="switch switch-outline switch-xs switch-primary" checked />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-xs">Extra small switch</span>
</span>
</label>
<label class="form-control flex items-center gap-0.5">
<input type="checkbox" class="switch switch-outline switch-sm switch-primary" checked />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-sm">Small switch</span>
</span>
</label>
<label class="form-control flex items-center gap-1">
<input type="checkbox" class="switch switch-outline switch-primary" checked />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-base">Default switch</span>
</span>
</label>
<label class="form-control flex items-center gap-1.5">
<input type="checkbox" class="switch switch-outline switch-lg switch-primary" checked />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-lg">Large switch</span>
</span>
</label>Success state can be show using is-valid class.
<label class="form-control flex items-start gap-3">
<input type="checkbox" class="switch switch-primary is-valid mt-2" checked />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-base">Email Notifications</span>
<span class="text-sm">Receive email notifications for updates</span>
</span>
</label>
<label class="form-control flex items-start gap-3">
<input type="checkbox" class="switch switch-outline switch-primary is-valid mt-2" checked />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-base">Dark Mode</span>
<span class="text-sm">Enable dark mode for better readability</span>
</span>
</label>Error state can be show using is-invalid class.
<label class="form-control flex items-start gap-3">
<input type="checkbox" class="switch switch-primary is-invalid mt-2" />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-base">Email Notifications</span>
<span class="text-sm">Receive email notifications for updates</span>
</span>
</label>
<label class="form-control flex items-start gap-3">
<input type="checkbox" class="switch switch-outline switch-primary is-invalid mt-2" />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-base">Dark Mode</span>
<span class="text-sm">Enable dark mode for better readability</span>
</span>
</label>You can also add additional elements, such as icons.
<!-- Default switch -->
<div class="space-x-3">
<label class="relative inline-block">
<input type="checkbox" class="switch switch-primary peer" aria-label="default switch with icon" />
<span class="icon-[tabler--check] peer-checked:text-primary-content absolute start-1 top-1 hidden size-4 peer-checked:block" ></span>
<span class="icon-[tabler--x] text-base-content peer-checked:text-base-content/90 absolute end-1.5 top-1 block size-4 peer-checked:hidden" ></span>
</label>
<label class="relative inline-block">
<input type="checkbox" class="switch switch-primary peer" aria-label="default switch with icon" checked />
<span class="icon-[tabler--check] peer-checked:text-primary-content absolute start-1 top-1 hidden size-4 peer-checked:block" ></span>
<span class="icon-[tabler--x] text-base-content peer-checked:text-base-content/90 absolute end-1.5 top-1 block size-4 peer-checked:hidden" ></span>
</label>
</div>
<!-- Outline switch -->
<div class="space-x-3">
<label class="relative inline-block">
<input type="checkbox" class="switch switch-primary switch-outline peer" aria-label="outline switch with icon" />
<span class="icon-[tabler--check] text-base-content/90 peer-checked:text-primary absolute start-1 top-1 hidden size-4 peer-checked:block" ></span>
<span class="icon-[tabler--x] text-base-content/90 absolute end-1.5 top-1 block size-4 peer-checked:hidden" ></span>
</label>
<label class="relative inline-block">
<input type="checkbox" class="switch switch-primary switch-outline peer" aria-label="outline switch with icon" checked />
<span class="icon-[tabler--check] text-base-content/90 peer-checked:text-primary absolute start-1 top-1 hidden size-4 peer-checked:block" ></span>
<span class="icon-[tabler--x] text-base-content/90 absolute end-1.5 top-1 block size-4 peer-checked:hidden" ></span>
</label>
</div>Disabled switch
<div class="space-x-3">
<input type="checkbox" class="switch switch-primary" aria-label="disabled switch" disabled />
<input type="checkbox" class="switch switch-primary" aria-label="disabled switch" checked disabled />
</div>
<div class="space-x-3">
<input type="checkbox" class="switch switch-primary switch-outline" aria-label="outlined disabled switch" disabled />
<input type="checkbox" class="switch switch-primary switch-outline" aria-label="outlined disabled switch" checked disabled />
</div>
The indeterminate state can be configured using JavaScript. To gain further insight into this concept, you can explore more about it here.
<label class="form-control flex items-center gap-1">
<input type="checkbox" class="switch switch-primary" id="switchSolid" />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-base">Solid switch</span>
</span>
</label>
<label class="form-control flex items-center gap-1">
<input type="checkbox" class="switch switch-primary switch-outline" id="switchOutline" />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-base">Outline switch</span>
</span>
</label>
<!-- js -->
<script>
document.getElementById("switchSolid").indeterminate = true
document.getElementById("switchOutline").indeterminate = true
</script>A group of switch components in single line.
<div class="flex gap-4 flex-col sm:flex-row">
<label class="form-control flex items-start gap-2">
<input type="checkbox" class="switch switch-primary mt-2" />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-base">Email Notifications</span>
<span class="text-neutral text-sm">Receive email notifications for updates</span>
</span>
</label>
<label class="form-control flex items-start gap-2">
<input type="checkbox" class="switch switch-primary mt-2" checked />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-base">Dark Mode</span>
<span class="text-neutral text-sm">Enable dark mode for better readability</span>
</span>
</label>
<label class="form-control flex items-start gap-2">
<input type="checkbox" class="switch switch-primary mt-2" />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-base">Auto-Save</span>
<span class="text-neutral text-sm">Automatically save changes as you edit</span>
</span>
</label>
</div>A vertical group of switch components.
<div class="flex flex-col">
<label class="form-control flex items-start gap-4">
<input type="checkbox" class="switch switch-primary mt-2" />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-base">Email Notifications</span>
<span class="text-neutral text-sm">Receive email notifications for updates</span>
</span>
</label>
<label class="form-control flex items-start gap-4">
<input type="checkbox" class="switch switch-primary mt-2" checked />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-base">Dark Mode</span>
<span class="text-neutral text-sm">Enable dark mode for better readability</span>
</span>
</label>
<label class="form-control flex items-start gap-4">
<input type="checkbox" class="switch switch-primary mt-2" />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-base">Auto-Save</span>
<span class="text-neutral text-sm">Automatically save changes as you edit</span>
</span>
</label>
</div>Here’s an example of a switch in dropdown.
To learn more about dropdowns, refer to the
Dropdown
documentation.
<div class="dropdown relative inline-flex [--auto-close:inside] rtl:[--placement:bottom-end]">
<button id="dropdown-checkbox" type="button" class="dropdown-switch btn btn-primary" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
Dropdown switch
<span class="icon-[tabler--chevron-down] dropdown-open:rotate-180 size-4"></span>
</button>
<div class="dropdown-menu dropdown-open:opacity-100 min-w-60 hidden" role="menu" aria-orientation="vertical" aria-labelledby="dropdown-checkbox">
<label class="dropdown-item flex-col items-center gap-4 sm:flex-row sm:items-start">
<input type="checkbox" class="switch switch-primary mt-2" />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-base">Email Notifications</span>
<span class="text-neutral text-sm">Receive email notifications for updates</span>
</span>
</label>
<label class="dropdown-item flex-col items-center gap-4 sm:flex-row sm:items-start">
<input type="checkbox" class="switch switch-primary mt-2" checked />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-base">Dark Mode</span>
<span class="text-neutral text-sm">Enable dark mode for better readability</span>
</span>
</label>
<label class="dropdown-item flex-col items-center gap-4 sm:flex-row sm:items-start">
<input type="checkbox" class="switch switch-primary mt-2" />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-base">Auto-Save</span>
<span class="text-neutral text-sm">Automatically save changes as you edit</span>
</span>
</label>
</div>
</div>This example can be used to show a list of switch inside a grouped list.
Switch to your preferred languages:
<h6 class="text-base-content/90 text-base">Switch to your preferred languages:</h6>
<div class="max-w-sm">
<ul class="border-base-content/25 divide-base-content/25 divide-y rounded-box border *:p-3 first:*:rounded-t-box last:*:rounded-b-box">
<li>
<label class="form-control flex items-center gap-3">
<input type="checkbox" class="switch switch-primary" />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-base">JavaScript</span>
</span>
</label>
</li>
<li>
<label class="form-control flex items-center gap-3">
<input type="checkbox" class="switch switch-primary" checked />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-base">Python</span>
</span>
</label>
</li>
<li>
<label class="form-control flex items-center gap-3">
<input type="checkbox" class="switch switch-primary" />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-base">Java</span>
</span>
</label>
</li>
</ul>
</div>Use this example to group up switch components inside a list.
Switch to your preferred languages:
<h6 class="text-base-content/90 text-base">Switch to your preferred languages:</h6>
<div class="w-full">
<ul class="border-base-content/25 divide-base-content/25 flex flex-col divide-y rounded-box border *:p-3 first:*:rounded-t-box last:*:rounded-b-box sm:flex-row sm:divide-x sm:divide-y-0 first:*:sm:rounded-s-box first:*:sm:rounded-tr-none last:*:sm:rounded-e-box last:*:sm:rounded-bl-none rtl:divide-x-reverse" >
<li class="w-full">
<label class="form-control flex items-center gap-3">
<input type="checkbox" class="switch switch-primary" />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-base">JavaScript</span>
</span>
</label>
</li>
<li class="w-full">
<label class="form-control flex items-center gap-3">
<input type="checkbox" class="switch switch-primary" checked />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-base">Python</span>
</span>
</label>
</li>
<li class="w-full">
<label class="form-control flex items-center gap-3">
<input type="checkbox" class="switch switch-primary" />
<span class="label cursor-pointer flex-col items-start">
<span class="label-text text-base">Java</span>
</span>
</label>
</li>
</ul>
</div>
