Switch API

API documentation for Switch component

SwitchRoot#

Props#

Defines valid properties in Switch component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: SwitchRootInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: SwitchRootInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<SwitchRootPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: SwitchRootInstance) => ReactNode)	null	The children to render.
value	unknown	null	Value of the switch.
disabled	boolean	false	When present, it specifies that the element should be disabled.
required	boolean	false	When present, it specifies that the element is required.
invalid	boolean	false	When present, it specifies that the component should have invalid state style.
inputId	string	null	Identifier of the underlying input element.
inputStyle	CSSProperties	null	Inline style of the input field.
inputClassName	string	null	Style class of the input field.
ariaLabel	string	null	Establishes a string value that labels the component.
ariaLabelledby	string	null	Establishes relationships between the component and label(s) where its value should be one or more element IDs.
onFocus	(event: FocusEvent<HTMLInputElement>) => void	null	Callback function that is called when the switch is focused.
onBlur	(event: FocusEvent<HTMLInputElement>) => void	null	Callback function that is called when the switch loses focus.
onCheckedChange	(event: SwitchRootChangeEvent) => void	null	Callback fired when the switch's checked state changes.
checked	boolean	null	When present, it specifies the input's checked state.
defaultChecked	boolean	null	The default value for the input when not controlled by `checked` and `onCheckedChange` .
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Defines valid state in Switch component.

name	type	default	description
checked	boolean	null	The checked state of the useSwitch.

Exposes#

Defines the methods and properties exposed by Switch component.

name	type	default	description
state	useSwitchState	null	The state of the useSwitch.
onChange	(event: useSwitchChangeEvent) => void	null	Callback fired when the useSwitch's checked state changes.

Events#

SwitchRootChangeEvent

Event fired when the switch's checked state changes.

name	type	description
value	unknown	Value of the switch.
originalEvent	ChangeEvent	The original event that triggered the change.
checked	boolean	The checked state of the switch.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of Switch component.

name	type	default	description
root	SwitchRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the root's DOM element.
input	SwitchRootPassThroughType<HTMLAttributes<HTMLElement>>	null	Used to pass attributes to the input's DOM element.
control	SwitchRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the control's DOM element.
thumb	SwitchRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the thumb's DOM element.

Types#

Instance

Instance of Switch component.

values
ComponentInstance<SwitchRootProps, SwitchRootState, SwitchRootExposes>

SwitchControl#

Props#

Defines valid properties in SwitchControl component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: SwitchControlInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: SwitchControlInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<SwitchControlPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: SwitchControlInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by SwitchControl component.

name	type	default	description
switch	SwitchRootInstance	null	The Switch component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of SwitchControl component.

name	type	default	description
root	SwitchControlPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of SwitchControl component.

values
ComponentInstance<SwitchControlProps, SwitchControlState, SwitchControlExposes>

SwitchThumb#

Props#

Defines valid properties in SwitchThumb component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: SwitchThumbInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: SwitchThumbInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<SwitchThumbPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: SwitchThumbInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by SwitchThumb component.

name	type	default	description
switch	SwitchRootInstance	null	The Switch component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of SwitchThumb component.

name	type	default	description
root	SwitchThumbPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of SwitchThumb component.

values
ComponentInstance<SwitchThumbProps, SwitchThumbState, SwitchThumbExposes>

useSwitch#

Props#

Defines valid properties in useSwitch.

name	type	default	description
checked	boolean	null	When present, it specifies the input's checked state.
defaultChecked	boolean	null	The default value for the input when not controlled by `checked` and `onCheckedChange` .
onCheckedChange	(event: useSwitchChangeEvent) => void	null	Callback fired when the switch's checked state changes.

State#

Defines valid state in useSwitch.

name	type	default	description
checked	boolean	null	The checked state of the useSwitch.

Exposes#

Defines the methods and properties exposed by useSwitch.

name	type	default	description
state	useSwitchState	null	The state of the useSwitch.
onChange	(event: useSwitchChangeEvent) => void	null	Callback fired when the useSwitch's checked state changes.

Events#

useSwitchChangeEvent

Event fired when the switch's checked state changes.

name	type	description
originalEvent	E	The original event that triggered the change.
checked	boolean	The checked state of the switch.

Types#

Instance

Instance of useSwitch headless.

values
HeadlessInstance<useSwitchProps, useSwitchState, useSwitchExposes>