Forms

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.

Basic example

Default

Basic Switch example.

Default

Checked

Type

Solid (Default)

For a switch style, apply the `switch` component class, whereas the default switch appearance is set to a solid color.

Default

Checked

Outline

To achieve an outline style for the switch, add component class `switch-outline` alongside `switch`.

Default

Checked

Color

Semantic color — Default switch

Example of semantic color in default and outline switch.

Semantic color — Outline switch

Outline switch with semantic-color using `switch-{semantic-color}` modifier class with component classes `switch` & `switch-outline`.

Custom color — Default switch

Example of custom color in default and outline switch.

Hex code

Named color

Tailwind utility colors

Semji variable

Custom color — Outline switch

For `switch-outline`, use `--input-color` to set both the border and text color when the switch is checked. This eliminates the need to apply `checked:bg-*` and `checked:border-*` individually. You can still use `text-*` and `border-*` utilities to further customize the ball and border colors separately.

Tailwind utility colors

With variable

Size

Solid switch

Add responsive class `switch-{size}` where `{size} = xs|sm|md|lg|xl` for switch of different sizes.

Outline switch

Add responsive class `switch-{size}` where `{size} = xs|sm|md|lg|xl` for switch of different sizes.

Validation states

Success state

Success state can be show using `is-valid` class.

Email Notifications Receive email notifications for updates

Dark Mode Enable dark mode for better readability

Error state

Error state can be show using `is-invalid` class.

Email Notifications Receive email notifications for updates

Dark Mode Enable dark mode for better readability

Illustrations

Switch with icon

You can also add additional elements, such as icons.

Disabled

Disabled switch

Indeterminate

The `indeterminate` state can be configured using JavaScript. To gain further insight into this concept, you can explore more about it <a href="https://www.w3schools.com/jsref/prop_checkbox_indeterminate.asp" target="_blank" class="link link-primary">here</a>.

Solid switch

Outline switch

Inline switch group

A group of switch components in single line.

Email Notifications Receive email notifications for updates

Dark Mode Enable dark mode for better readability

Auto-Save Automatically save changes as you edit

Vertical switch group

A vertical group of switch components.

Email Notifications Receive email notifications for updates

Dark Mode Enable dark mode for better readability

Auto-Save Automatically save changes as you edit

Switch in dropdown

Here’s an example of a switch in dropdown.

Switch list group

This example can be used to show a list of switch inside a grouped list.

Switch to your preferred languages:

JavaScript
Python
Java

Horizontal list group

Use this example to group up switch components inside a list.

Switch to your preferred languages:

JavaScript
Python
Java

Class referenceThe component, style, color, state, size and modifier classes available for this component.

Class	Type	Description
`switch`	component	Component class for switch.
`label-text`	part	Base class for title label text.
`helper-text`	part	Base class for helper label text.
`switch-outline`	style	Component class outline switch.
`switch-primary`	color	Adds 'primary' color to switch.
`switch-secondary`	color	Adds 'secondary' color to switch.
`switch-accent`	color	Adds 'accent' color to switch.
`switch-info`	color	Adds 'info' color to switch.
`switch-success`	color	Adds 'success' color to switch.
`switch-warning`	color	Adds 'warning' color to switch.
`switch-error`	color	Adds 'error' color to switch.
`is-valid`	state	Adds success style to the input.
`is-invalid`	state	Adds error style to the input.
`switch-xs`	size	Switch with extra small size.
`switch-sm`	size	Switch with small size.
`switch-md`	size	Switch with medium size.
`switch-lg`	size	Switch with large size.
`switch-xl`	size	Switch with extra large size.