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

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 towards a squared Switch with the squared property.

Bordered

You can change the full style towards a bodered 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

AttributeTypeAccepted valuesDescriptionDefault
colorNormalColorsNormalColorsChange switch colorprimary
sizeNormalSizesNormalSizesSwitch sizemedium
checkedbooleantrue/falseSelected or not (in single)false
initialCheckedbooleantrue/falseDetermine the initial value of the switchfalse
animatedbooleantrue/falseDisplay checkbox animationstrue
squaredbooleantrue/falseSquared switchfalse
shadowbooleantrue/falseDisplay shadow effectfalse
disabledbooleantrue/falseDisable switchfalse
borderedbooleantrue/falseBordered switchfalse
iconReactNode-Add an icon for both status on/off-
iconOnReactNode-Add an icon for on status-
iconOffReactNode-Add an icon for off status-
preventDefaultbooleantrue/falsePrevent default event on when is selected through the Space, Enter keystrue
onChange(e:SwitchEvent) => void-The callback invoked when the checked state of the switch changes.-
...LabelHTMLAttributes'id', 'className', ...Native props-

Switch types

Normal Colors

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

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;
}