Switch

A toggle input to switch between boolean values (true or false), or any pair of values with two possible outcomes.

Switch input can have any internal value assigned to checked and unchecked states, with optional text labels or custom UI.

Props

Prop	Type	Default	Description
controlledValue	Boolean		Whether to lock input value when `value` prop is given
defaultValue	Any		Initial value for uncontrolled checked or unchecked state
checkedValue	Any	`true`	Internal value to assign to checked case
uncheckedValue	Any	`false`	Internal value to assign to unchecked case
label	String \| Number \| Boolean \| Function		Label to show before the Switch (or after Switch with `reverse` true)
checkedLabel	String \| Number \| Boolean \| Function		UI to show for checked state inside the Switch toggle, defaults to a checkmark icon
uncheckedLabel	String \| Number \| Boolean \| Function		UI to show for unchecked state inside the Switch toggle, defaults to empty Spacer
onChange	Function		Handler(event, value: any, name?: string, self) on input value changes
onFocus	Function		Handler(event, value: any, name?: string, self) on input focus
onBlur	Function		Handler(event, value: any, name?: string, self) on input blur
value	Any		Internal value for controlled checked or unchecked state
format	Function		Function(value, name?, event?, self) => boolean - Input value formatter for input.checked
parse	Function		Function(value: boolean, name?, event, self) => any - value parser for onChange/onBlur/onFocus handlers
id	String		Unique identifier, default is string created from React.useId()

Props