Switch

A control that allows the user to toggle between checked and unchecked states.

On This Page

A control that allows the user to toggle between checked and unchecked states.

A control that allows the user to toggle between checked and unchecked states.

toggle switchImmediate state changes (dark mode toggle, push notifications, wifi settings)

checkbox (alternative)Standard multi-select forms where actions are not applied instantly (requires a Submit button click)

Live CanvasInteractive

Controls(2)

checked

boolean

Toggle state:

The controlled state of the switch

disabled

boolean

Toggle state:

Whether the switch is interactive or not

Generated JSX

import { Switch } from "nexoreui"

<Switch />

component.tsx

component.tsx

Airplane Mode

component.tsx

Push Notifications

Receive real-time alerts in this browser.

component.tsx

component.tsx

Prop	Type	Default	Description
checked	boolean	`false`	Controlled checked state of the switch toggle.
defaultChecked	boolean	`false`	Default initial checked state.
onCheckedChange	(checked: boolean) => void	`—`	Callback triggered when the checked state changes.
disabled	boolean	`false`	Disables interaction and visually mutes the switch.
name	string	`—`	Name of the input field for HTML forms integration.
value	string	`—`	Value of the switch input element.
className	string	`—`	Additional custom class names.

Keyboard Navigation: Fully focusable using Tab, and state changes on Space or Enter.
ARIA attributes: Uses Radix UI Switch primitive, which exports role="switch" and maps the state visually to screen readers via aria-checked.

On This Page