Switch

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

useSwitchRoot API

import { useSwitchRoot } from '@base_ui/react/Switch';

Name	Type	Default	Description
checked	boolean	-	If `true`, the switch is checked.
defaultChecked	boolean	-	The default checked state. Use when the component is not controlled.
disabled	boolean	false	If `true`, the component is disabled and can't be interacted with.
id	string	-	The id of the switch element.
inputRef	React.Ref<HTMLInputElement>	-	Ref to the underlying input element.
name	string	-	Name of the underlying input element.
onCheckedChange	(checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void	-	Callback fired when the checked state is changed.
readOnly	boolean	false	If `true`, the component is read-only. Functionally, this is equivalent to being disabled, but the assistive technologies will announce this differently.
required	boolean	false	If `true`, the switch must be checked for the browser validation to pass.

Name	Type	Description
checked	boolean	If `true`, the component will be checked.
getButtonProps	(externalProps?: React.ComponentPropsWithRef<'button'>) => React.ComponentPropsWithRef<'button'>	Resolver for the button element's props.
getInputProps	(externalProps?: React.ComponentPropsWithRef<'input'>) => React.ComponentPropsWithRef<'input'>	Resolver for the input element's props.