Switch

The Switch component is used as an alternative for the Checkbox component. You can switch between enabled or disabled states.

import { Switch } from '@nextui-org/react';

Default

You can change the state with checked prop

Initial checked

You can set the Switch to be checked by default using initialChecked prop

Disabled

Unusable and un-clickable Switch.

Sizes

Change the size of the entire Switch including padding and border with the size property.

Colors

You can change the color of the Switch with the property color.

Shadow

You can add a shadow effect with the property shadow.

Squared

You can change the full style to a squared Switch with the squared property.

Bordered

You can change the full style to a bordered Switch with the bordered property.

No Animated

You can disable the animation of the entire Switch with the property animated={false}.

Icons

NextUI doesn't use any library or icon font by default, with this we give the freedom to use the one you prefer. In the following example we use Boxicons

APIs

Switch Props

Attribute	Type	Accepted values	Description	Default
color	`NormalColors`	NormalColors	Change switch color	`primary`
size	`NormalSizes`	NormalSizes	Switch size	`medium`
checked	`boolean`	`true/false`	Selected or not (in single)	`false`
initialChecked	`boolean`	`true/false`	Determine the initial value of the switch	`false`
animated	`boolean`	`true/false`	Display checkbox animations	`true`
squared	`boolean`	`true/false`	Squared switch	`false`
shadow	`boolean`	`true/false`	Display shadow effect	`false`
disabled	`boolean`	`true/false`	Disable switch	`false`
bordered	`boolean`	`true/false`	Bordered switch	`false`
icon	`ReactNode`	-	Add an icon for both status on/off	-
iconOn	`ReactNode`	-	Add an icon for on status	-
iconOff	`ReactNode`	-	Add an icon for off status	-
preventDefault	`boolean`	`true/false`	Prevent default event on when is selected through the `Space, Enter` keys	`true`
name	`string`	-	Add a name to the input of the switch.	-
onChange	`(e:`SwitchEvent) `=> void`	-	The callback invoked when the checked state of the switch changes.	-
css	`Stitches.CSS`	-	Override Default CSS style	-
as	`keyof JSX.IntrinsicElements`	-	Changes which tag component outputs	`div`
...	`LabelHTMLAttributes`	`'id', 'className', ...`	Native props	-

Switch types

Normal Colors

type NormalColors =
  | 'default'
  | 'primary'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error';

Normal Sizes

type NormalSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

Switch Event

interface SwitchEvent {
  target: SwitchEventTarget;
  stopPropagation: () => void;
  preventDefault: () => void;
  nativeEvent: React.ChangeEvent;
}

Switch Event Target

interface SwitchEventTarget {
  checked: boolean;
}

Loading Text

Created by Junior Garcia

Deployed on

Documentation

Switch