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


You can change the state with checked prop

Initial checked

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


Unusable and un-clickable Switch.


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


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


You can add a shadow effect with the property shadow.


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


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


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


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
namestring-Add a name to the input of the switch.-
onChange(e:SwitchEvent) => void-The callback invoked when the checked state of the switch changes.-
cssStitches.CSS-Override Default CSS style-
askeyof JSX.IntrinsicElements-Changes which tag component outputsdiv
...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;
gradient blue backgroundgradient violet background