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

import { Switch, Spacer } from "@nextui-org/react";

export default function App() {
  return (
    <>
      <Switch />
      <Spacer />
      <Switch checked={true} />
    </>
  );
}

Initial checked

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

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

export default function App() {
  return <Switch initialChecked />;
}

Disabled

Unusable and un-clickable Switch.

import { Switch, Spacer } from "@nextui-org/react";

export default function App() {
  return (
    <>
      <Switch disabled />
      <Spacer />
      <Switch checked={true} disabled />
    </>
  );
}

Sizes

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

import { Switch, Spacer } from "@nextui-org/react";

export default function App() {
  return (
    <>
      <Switch checked={true} size="xs" />
      <Spacer />
      <Switch size="sm" />
      <Spacer />
      <Switch checked={true} size="md" />
      <Spacer />
      <Switch size="lg" />
      <Spacer />
      <Switch checked={true} size="xl" />
    </>
  );
}

Colors

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

import { Switch, Grid } from "@nextui-org/react";

export default function App() {
  return (
    <Grid.Container gap={2}>
      <Grid>
        <Switch color="primary" checked={true} />
      </Grid>
      <Grid>
        <Switch color="secondary" checked={true} />
      </Grid>
      <Grid>
        <Switch color="success" checked={true} />
      </Grid>
      <Grid>
        <Switch color="warning" checked={true} />
      </Grid>
      <Grid>
        <Switch color="error" checked={true} />
      </Grid>
    </Grid.Container>
  );
}

Shadow

You can add a shadow effect with the property shadow.

import { Switch, Grid } from "@nextui-org/react";

export default function App() {
  return (
    <Grid.Container gap={2}>
      <Grid>
        <Switch shadow color="primary" checked={true} />
      </Grid>
      <Grid>
        <Switch shadow color="secondary" checked={true} />
      </Grid>
      <Grid>
        <Switch shadow color="success" checked={true} />
      </Grid>
      <Grid>
        <Switch shadow color="warning" checked={true} />
      </Grid>
      <Grid>
        <Switch shadow color="error" checked={true} />
      </Grid>
    </Grid.Container>
  );
}

Squared

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

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

export default function App() {
  return (
    <Switch squared color="primary" checked={true}>
      Squared option
    </Switch>
  );
}

Bordered

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

import { Switch, Spacer } from "@nextui-org/react";

export default function App() {
  return (
    <>
      <Switch bordered size="xs" />
      <Spacer />
      <Switch bordered size="sm" color="secondary" />
      <Spacer />
      <Switch bordered size="md" color="success" />
      <Spacer />
      <Switch bordered size="lg" color="warning" />
      <Spacer />
      <Switch bordered size="xl" color="error" />
    </>
  );
}

No Animated

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

import { Switch, Spacer } from "@nextui-org/react";

export default function App() {
  return (
    <>
      <Switch animated={false} checked={true} />
      <Spacer />
      <Switch 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

import { Grid, Switch } from "@nextui-org/react";
import { SunIcon } from './SunIcon';
import { MoonIcon } from './MoonIcon';
import { VideoIcon } from './VideoIcon';
import { VolumeUpIcon } from './VolumeUpIcon';
import { MicrophoneIcon } from './MicrophoneIcon';
import { MicrophoneOffIcon } from './MicrophoneOffIcon';
import { NotificationIcon } from './NotificationIcon';
import { VideoOffIcon } from './VideoOffIcon';

export default function App() {
  return (
    <Grid.Container gap={2}>
      <Grid>
        <Switch
          checked={true}
          size="xl"
          color="success"
          icon={<NotificationIcon />}
        />
      </Grid>
      <Grid>
        <Switch
          checked={true}
          size="xl"
          iconOn={<SunIcon filled />}
          iconOff={<MoonIcon filled />}
        />
      </Grid>
      <Grid>
        <Switch
          checked={true}
          size="xl"
          color="error"
          iconOn={<MicrophoneOffIcon filled />}
          iconOff={<MicrophoneIcon filled />}
        />
      </Grid>
      <Grid>
        <Switch
          checked={true}
          size="xl"
          color="warning"
          iconOn={<VideoOffIcon filled />}
          iconOff={<VideoIcon filled />}
        />
      </Grid>
      <Grid>
        <Switch
          checked={true}
          size="xl"
          color="secondary"
          icon={<VolumeUpIcon />}
        />
      </Grid>
    </Grid.Container>
  );
}

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