Switch

Switches toggle the state of a single setting on or off.

Source

View source code

Issues

Report an issue

Package

@rootui/switch

Reference

React Aria docs

Preview

size

color

isDisabled

1<v />

1<Switch />

Package

Shadcn CLI

Manual

Note

Please ensure your local environment is fully configured as instructed in the getting started guide.

npm

yarn

pnpm

bun

npm install @rootui/switch

1import { Switch } from "@rootui/switch";
2
3export default function Page() {
4  return (
5    <Switch />
6  )
7}

See the React Aria documentation for more information.

Prop	Type	Default
`defaultSelected`	`Boolean`	`false`
Whether the Switch should be selected (uncontrolled).
`isSelected`	`Boolean`	`-`
Whether the Switch should be selected (controlled).
`isDisabled`	`Boolean`	`-`
Whether the input is disabled.
`isReadOnly`	`Boolean`	`false`
Whether the input can be selected but not changed by the user.
`onChange`	`(isSelected: boolean) => void`	`-`
Handler that is called when the Switch's selection state changes.

Attribute	Description
`data-selected`	Whether the switch is selected.
`data-hovered`	Whether the switch is currently hovered with a mouse.
`data-pressed`	Whether the switch is currently in a pressed state.
`data-focused`	Whether the switch is focused, either via a mouse or keyboard.
`data-focus-visible`	Whether the switch is keyboard focused.
`data-disabled`	Whether the switch is disabled.
`data-readonly`	Whether the switch is read only.