Switch

Switch is a UI element that let users choose between two states.

SwitchRoot API

import * as Switch from '@base_ui/react/Switch';
const SwitchRoot = Switch.Root;

Props of the native component are also available.

Name	Type	Default	Description
checked	bool	-	If `true`, the switch is checked.
className	func \| string	-	Class names applied to the element or a function that returns them based on the component's state.
defaultChecked	bool	-	The default checked state. Use when the component is not controlled.
disabled	bool	false	If `true`, the component is disabled and can't be interacted with.
id	string	-	The id of the switch element.
inputRef	ref	-	Ref to the underlying input element.
name	string	-	Name of the underlying input element.
onCheckedChange	func	-	Callback fired when the checked state is changed. Signature:`function(checked: boolean, event: React.ChangeEvent) => void` `checked` The new checked state. `event` The event source of the callback.
readOnly	bool	false	If `true`, the component is read-only. Functionally, this is equivalent to being disabled, but the assistive technologies will announce this differently.
render	element \| func	-	A function to customize rendering of the component.
required	bool	false	If `true`, the switch must be checked for the browser validation to pass.

The ref is forwarded to the root element.

You can use SwitchRoot to change the default props of this component with the theme.

import * as Switch from '@base_ui/react/Switch';
const SwitchThumb = Switch.Thumb;

Props of the native component are also available.

Name	Type	Description
className	func \| string	Class names applied to the element or a function that returns them based on the component's state.
render	element \| func	A function to customize rendering of the component.

The ref is forwarded to the root element.

You can use SwitchThumb to change the default props of this component with the theme.