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. |
| 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.
<div class="flex items-center gap-1">
<input type="checkbox" class="switch" id="defaultSwitch1" />
<label class="label label-text text-base" for="defaultSwitch1"> Default </label>
</div>
<div class="flex items-center gap-1">
<input type="checkbox" class="switch" id="defaultSwitch2" checked />
<label class="label label-text text-base" for="defaultSwitch2"> Checked </label>
</div>For a switch style, apply the switch component class, whereas the default switch appearance is set to a solid color.
<div class="flex items-center gap-1">
<input type="checkbox" class="switch switch-primary" id="switchType1" />
<label class="label label-text text-base" for="switchType1"> Default </label>
</div>
<div class="flex items-center gap-1">
<input type="checkbox" class="switch switch-primary" id="switchType2" checked />
<label class="label label-text text-base" for="switchType2"> Checked </label>
</div>To achieve an outline style for the switch, add component class switch-outline alongside switch.
<div class="flex items-center gap-1">
<input type="checkbox" class="switch switch-outline switch-primary" id="switchType3" />
<label class="label label-text text-base" for="switchType3"> Default </label>
</div>
<div class="flex items-center gap-1">
<input type="checkbox" class="switch switch-outline switch-primary" id="switchType3" checked />
<label class="label label-text text-base" for="switchType3"> Checked </label>
</div>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.
<div class="flex items-center gap-1">
<input type="checkbox" class="switch" id="switchDefault1" checked />
<label class="label label-text text-base" for="switchDefault1"> Default </label>
</div>
<div class="flex items-center gap-1">
<input type="checkbox" class="switch switch-primary" id="switchPrimary1" checked />
<label class="label label-text text-base" for="switchPrimary1"> Primary </label>
</div>
<div class="flex items-center gap-1">
<input type="checkbox" class="switch switch-secondary" id="switchSecondary1" checked />
<label class="label label-text text-base" for="switchSecondary1"> Secondary </label>
</div>
<div class="flex items-center gap-1">
<input type="checkbox" class="switch switch-accent" id="switchAccent1" checked />
<label class="label label-text text-base" for="switchAccent1"> Accent </label>
</div>
<div class="flex items-center gap-1">
<input type="checkbox" class="switch switch-info" id="switchInfo1" checked />
<label class="label label-text text-base" for="switchInfo1"> Info </label>
</div>
<div class="flex items-center gap-1">
<input type="checkbox" class="switch switch-success" id="switchSuccess1" checked />
<label class="label label-text text-base" for="switchSuccess1"> Success </label>
</div>
<div class="flex items-center gap-1">
<input type="checkbox" class="switch switch-warning" id="switchWarning1" checked />
<label class="label label-text text-base" for="switchWarning1"> Warning </label>
</div>
<div class="flex items-center gap-1">
<input type="checkbox" class="switch switch-error" id="switchError1" checked />
<label class="label label-text text-base" for="switchError1"> Error </label>
</div>Outline switch with semantic-color using switch-{semantic-color} modifier class with component classes switch & switch-outline.
<div class="flex items-center gap-1">
<input type="checkbox" class="switch switch-outline" id="switchDefault2" checked />
<label class="label label-text text-base" for="switchDefault2"> Default </label>
</div>
<div class="flex items-center gap-1">
<input type="checkbox" class="switch switch-outline switch-primary" id="switchPrimary2" checked />
<label class="label label-text text-base" for="switchPrimary2"> Primary </label>
</div>
<div class="flex items-center gap-1">
<input type="checkbox" class="switch switch-outline switch-secondary" id="switchSecondary2" checked />
<label class="label label-text text-base" for="switchSecondary2"> Secondary </label>
</div>
<div class="flex items-center gap-1">
<input type="checkbox" class="switch switch-outline switch-accent" id="switchAccent2" checked />
<label class="label label-text text-base" for="switchAccent2"> Accent </label>
</div>
<div class="flex items-center gap-1">
<input type="checkbox" class="switch switch-outline switch-info" id="switchInfo2" checked />
<label class="label label-text text-base" for="switchInfo2"> Info </label>
</div>
<div class="flex items-center gap-1">
<input type="checkbox" class="switch switch-outline switch-success" id="switchSuccess2" checked />
<label class="label label-text text-base" for="switchSuccess2"> Success </label>
</div>
<div class="flex items-center gap-1">
<input type="checkbox" class="switch switch-outline switch-warning" id="switchWarning2" checked />
<label class="label label-text text-base" for="switchWarning2"> Warning </label>
</div>
<div class="flex items-center gap-1">
<input type="checkbox" class="switch switch-outline switch-error" id="switchError2" checked />
<label class="label label-text text-base" for="switchError2"> Error </label>
</div>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.
<div class="flex items-center gap-1">
<input type="checkbox" class="switch bg-purple-100 [--tglbg:#9b59b6]" id="switchCustomColor1" />
<label class="label label-text text-base" for="switchCustomColor1"> Hex code </label>
</div>
<div class="flex items-center gap-1">
<input type="checkbox" class="switch bg-green-100 [--tglbg:green]" id="switchCustomColor2" />
<label class="label label-text text-base" for="switchCustomColor2"> Named color </label>
</div>
<div class="flex items-center gap-1">
<input type="checkbox" class="switch bg-accent/50 [--tglbg:oklch(var(--n))]" id="switchCustomColor3" />
<label class="label label-text text-base" for="switchCustomColor3"> UI color CSS variable </label>
</div>
<div class="flex items-center gap-1">
<input type="checkbox" class="switch bg-blue-100 [--tglbg:theme(colors.blue.600)]" id="switchCustomColor4" />
<label class="label label-text text-base" for="switchCustomColor4"> Tailwind colors </label>
</div>To customize the outline switch, simply modify the bg and border color properties.
<div class="flex items-center gap-1">
<input type="checkbox" class="switch switch-outline border-red-600 bg-blue-600 checked:bg-blue-400" id="switchCustomColor5" />
<label class="label label-text text-base" for="switchCustomColor5"> Custom color </label>
</div>The switch is available in three sizes: switch-xs for extra small, switch-sm for small, the default size, and switch-lg for large.
<div class="flex items-center">
<input type="checkbox" class="switch switch-xs switch-primary" id="switchExtraSmall1" checked />
<label class="label label-text text-xs" for="switchExtraSmall1"> Extra small switch </label>
</div>
<div class="flex items-center gap-0.5">
<input type="checkbox" class="switch switch-sm switch-primary" id="switchSmall1" checked />
<label class="label label-text" for="switchSmall1"> Small switch </label>
</div>
<div class="flex items-center gap-1">
<input type="checkbox" class="switch switch-primary" id="switchSizeDefault1" checked />
<label class="label label-text text-base" for="switchSizeDefault1"> Default switch </label>
</div>
<div class="flex items-center gap-1.5">
<input type="checkbox" class="switch switch-lg switch-primary" id="switchLarge1" checked />
<label class="label label-text text-lg" for="switchLarge1"> Large switch </label>
</div>The switch is available in three sizes: switch-xs for extra small, switch-sm for small, the default size, and switch-lg for large.
<div class="flex items-center">
<input type="checkbox" class="switch switch-outline switch-xs switch-primary" id="switchExtraSmall2" checked />
<label class="label label-text text-xs" for="switchExtraSmall2"> Extra small switch </label>
</div>
<div class="flex items-center gap-0.5">
<input type="checkbox" class="switch switch-outline switch-sm switch-primary" id="switchSmall2" checked />
<label class="label label-text" for="switchSmall2"> Small switch </label>
</div>
<div class="flex items-center gap-1">
<input type="checkbox" class="switch switch-outline switch-primary" id="switchSizeDefault2" checked />
<label class="label label-text text-base" for="switchSizeDefault2"> Default switch </label>
</div>
<div class="flex items-center gap-1.5">
<input type="checkbox" class="switch switch-outline switch-lg switch-primary" id="switchLarge2" checked />
<label class="label label-text text-lg" for="switchLarge2"> Large switch </label>
</div>Success state can be show using is-valid class.
<div class="flex items-start gap-3">
<input type="checkbox" class="switch switch-primary is-valid mt-2" id="switchStateSuccess1" checked />
<label class="label cursor-pointer flex-col items-start" for="switchStateSuccess1">
<span class="label-text text-base">Email Notifications</span>
<span class="text-sm">Receive email notifications for updates</span>
</label>
</div>
<div class="flex items-start gap-3">
<input type="checkbox" class="switch switch-outline switch-primary is-valid mt-2" id="switchStateSuccess2" checked />
<label class="label cursor-pointer flex-col items-start" for="switchStateSuccess2">
<span class="label-text text-base">Dark Mode</span>
<span class="text-sm">Enable dark mode for better readability</span>
</label>
</div>Error state can be show using is-invalid class.
<div class="flex items-start gap-3">
<input type="checkbox" class="switch switch-primary is-invalid mt-2" id="switchStateError1" />
<label class="label cursor-pointer flex-col items-start" for="switchStateError1">
<span class="label-text text-base">Email Notifications</span>
<span class="text-sm">Receive email notifications for updates</span>
</label>
</div>
<div class="flex items-start gap-3">
<input type="checkbox" class="switch switch-outline switch-primary is-invalid mt-2" id="switchStateError2" />
<label class="label cursor-pointer flex-col items-start" for="switchStateError2">
<span class="label-text text-base">Dark Mode</span>
<span class="text-sm">Enable dark mode for better readability</span>
</label>
</div>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 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 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 peer-checked:text-primary absolute start-1 top-1 hidden size-4 peer-checked:block" ></span>
<span class="icon-[tabler--x] text-base-content 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 peer-checked:text-primary absolute start-1 top-1 hidden size-4 peer-checked:block" ></span>
<span class="icon-[tabler--x] text-base-content 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.
<div class="flex items-center gap-1">
<input type="checkbox" class="switch switch-primary" id="switchSolid" />
<label class="label label-text text-base" for="switchSolid"> Solid switch </label>
</div>
<div class="flex items-center gap-1">
<input type="checkbox" class="switch switch-primary switch-outline" id="switchOutline" />
<label class="label label-text text-base" for="switchOutline"> Outline switch </label>
</div>
<!-- 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">
<div class="flex items-start gap-2">
<input type="checkbox" class="switch switch-primary mt-2" id="switchInline1" />
<label class="label cursor-pointer flex-col items-start" for="switchInline1">
<span class="label-text text-base">Email Notifications</span>
<span class="text-neutral text-sm">Receive email notifications for updates</span>
</label>
</div>
<div class="flex items-start gap-2">
<input type="checkbox" class="switch switch-primary mt-2" id="switchInline2" checked />
<label class="label cursor-pointer flex-col items-start" for="switchInline2">
<span class="label-text text-base">Dark Mode</span>
<span class="text-neutral text-sm">Enable dark mode for better readability</span>
</label>
</div>
<div class="flex items-start gap-2">
<input type="checkbox" class="switch switch-primary mt-2" id="switchInline3" />
<label class="label cursor-pointer flex-col items-start" for="switchInline3">
<span class="label-text text-base">Auto-Save</span>
<span class="text-neutral text-sm">Automatically save changes as you edit</span>
</label>
</div>
</div>A vertical group of switch components.
<div class="flex flex-col">
<div class="flex items-start gap-4">
<input type="checkbox" class="switch switch-primary mt-2" id="switchVertical1" />
<label class="label cursor-pointer flex-col items-start" for="switchVertical1">
<span class="label-text text-base">Email Notifications</span>
<span class="text-neutral text-sm">Receive email notifications for updates</span>
</label>
</div>
<div class="flex items-start gap-4">
<input type="checkbox" class="switch switch-primary mt-2" id="switchVertical2" checked />
<label class="label cursor-pointer flex-col items-start" for="switchVertical2">
<span class="label-text text-base">Dark Mode</span>
<span class="text-neutral text-sm">Enable dark mode for better readability</span>
</label>
</div>
<div class="flex items-start gap-4">
<input type="checkbox" class="switch switch-primary mt-2" id="switchVertical3" />
<label class="label cursor-pointer flex-col items-start" for="switchVertical3">
<span class="label-text text-base">Auto-Save</span>
<span class="text-neutral text-sm">Automatically save changes as you edit</span>
</label>
</div>
</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">
<div class="dropdown-item flex-col items-center gap-4 sm:flex-row sm:items-start">
<input type="checkbox" class="switch switch-primary mt-2" id="switchDropdown1" />
<label class="label cursor-pointer flex-col items-start" for="switchDropdown1">
<span class="label-text text-base">Email Notifications</span>
<span class="text-neutral text-sm">Receive email notifications for updates</span>
</;>
</div>
<div class="dropdown-item flex-col items-center gap-4 sm:flex-row sm:items-start">
<input type="checkbox" class="switch switch-primary mt-2" id="switchDropdown2" checked />
<label class="label cursor-pointer flex-col items-start" for="switchDropdown2">
<span class="label-text text-base">Dark Mode</span>
<span class="text-neutral text-sm">Enable dark mode for better readability</span>
</;>
</div>
<div class="dropdown-item flex-col items-center gap-4 sm:flex-row sm:items-start">
<input type="checkbox" class="switch switch-primary mt-2" id="switchDropdown3" />
<label class="label cursor-pointer flex-col items-start" for="switchDropdown3">
<span class="label-text text-base">Auto-Save</span>
<span class="text-neutral text-sm">Automatically save changes as you edit</span>
</;>
</div>
</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 text-base mb-1">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 first:*:rounded-t-box last:*:rounded-b-box">
<li>
<label class="flex cursor-pointer items-center gap-3 p-3">
<input type="checkbox" class="switch switch-primary" />
<span class="label label-text text-base"> JavaScript </span>
</label>
</li>
<li>
<label class="flex cursor-pointer items-center gap-3 p-3">
<input type="checkbox" class="switch switch-primary" checked />
<span class="label label-text text-base"> Python </span>
</label>
</li>
<li>
<label class="flex cursor-pointer items-center gap-3 p-3">
<input type="checkbox" class="switch switch-primary" />
<span class="label label-text text-base"> Java </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 text-base mb-1">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 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="flex cursor-pointer items-center gap-3 p-3">
<input type="checkbox" class="switch switch-primary" />
<span class="label label-text text-base"> JavaScript </span>
</label>
</li>
<li class="w-full">
<label class="flex cursor-pointer items-center gap-3 p-3">
<input type="checkbox" class="switch switch-primary" checked />
<span class="label label-text text-base"> Python </span>
</label>
</li>
<li class="w-full">
<label class="flex cursor-pointer items-center gap-3 p-3">
<input type="checkbox" class="switch switch-primary" />
<span class="label label-text text-base"> Java </span>
</label>
</li>
</ul>
</div>
