ToggleButton API

API documentation for ToggleButton component

ToggleButtonRoot#

Props#

Defines valid properties in ToggleButton 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?: ToggleButtonRootInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ToggleButtonRootInstance) => 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<ToggleButtonRootPassThrough>	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: ToggleButtonRootInstance) => ReactNode)	null	The children to render.
value	unknown	null	Value of the ToggleButton.
size	"small" \| "large" \| "normal"	null	Defines the size of the ToggleButton.
disabled	boolean	false	When present, it specifies that the element should be disabled.
invalid	boolean	false	When present, it specifies that the component should have invalid state style.
onPressedChange	(event: ToggleButtonRootChangeEvent) => void	null	Callback fired when the ToggleButton's pressed state changes.
pressed	boolean	null	When present, it specifies that the ToggleButton should be pressed.
defaultPressed	boolean	null	The default pressed value when not controlled by `pressed` and `onPressedChange` .
[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 ToggleButton component.

name	type	default	description
pressed	boolean	null	The pressed state of the useToggleButton.

Exposes#

Defines the methods and properties exposed by ToggleButton component.

name	type	default	description
state	useToggleButtonState	null	The state of the useToggleButton.
onChange	(event: useToggleButtonChangeEvent) => void	null	Callback fired when the useToggleButton's pressed state changes.

Events#

ToggleButtonRootChangeEvent

Event fired when the ToggleButton's checked state changes.

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

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of ToggleButton component.

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

Types#

Instance

Instance of ToggleButton component.

values
ComponentInstance<ToggleButtonRootProps, ToggleButtonRootState, ToggleButtonRootExposes>

ToggleButtonIndicator#

Props#

Defines valid properties in ToggleButtonIndicator 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?: ToggleButtonIndicatorInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ToggleButtonIndicatorInstance) => 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<ToggleButtonIndicatorPassThrough>	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: ToggleButtonIndicatorInstance) => 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 ToggleButtonIndicator component.

name	type	default	description
togglebutton	ToggleButtonRootInstance	null	The ToggleButton component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of ToggleButtonIndicator component.

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

Types#

Instance

Instance of ToggleButtonIndicator component.

values
ComponentInstance<ToggleButtonIndicatorProps, ToggleButtonIndicatorState, ToggleButtonIndicatorExposes>

ToggleButtonGroup#

Props#

Defines valid properties in ToggleButtonGroup 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?: ToggleButtonGroupInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ToggleButtonGroupInstance) => 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<ToggleButtonGroupPassThrough>	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: ToggleButtonGroupInstance) => ReactNode)	null	The children to render.
size	"small" \| "large" \| "normal"	null	Defines the size of the ToggleButton components.
disabled	boolean	false	When present, it specifies that the ToggleButton group should be disabled.
invalid	boolean	false	When present, it specifies that the ToggleButton group is invalid.
onValueChange	(event: ToggleButtonGroupValueChangeEvent) => void	null	Callback function that is called when the ToggleButton group value changes.
value	unknown	null	Value of the ToggleButtonGroup.
defaultValue	unknown	null	The default value of the ToggleButtonGroup.
multiple	boolean	false	When present, it specifies that the ToggleButton group allows multiple selections.
allowEmpty	boolean	true	When present, it specifies that the ToggleButton group allows empty selection.
[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 ToggleButtonGroup component.

name	type	default	description
value	unknown	null	The value state of the useToggleButtonGroup.

Exposes#

Defines the methods and properties exposed by ToggleButtonGroup component.

name	type	default	description
state	ToggleButtonGroupState	null	The state of the ToggleButton group.
updateChange	(event: useToggleButtonGroupChangeEvent<SyntheticEvent<Element, Event>> & { pressed: boolean }) => void	null	Updates the value of the checkbox group.
isPressed	(value: unknown, toggleButtonValue: unknown) => boolean	null	Checks if a toggle button is pressed. Returns true if the toggle button is pressed, false if not pressed, or undefined if the value is undefined.

Events#

ToggleButtonGroupValueChangeEvent

Event fired when the ToggleButton group's value changes.

name	type	description
originalEvent	SyntheticEvent	The original event that triggered the change.
value	unknown	The value of the ToggleButtonGroup.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of ToggleButton component.

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

Types#

Instance

Instance of ToggleButtonGroup component.

values
ComponentInstance<ToggleButtonGroupProps, ToggleButtonGroupState, ToggleButtonGroupExposes>

useToggleButton#

Props#

Defines valid properties in useToggleButton.

name	type	default	description
pressed	boolean	null	When present, it specifies that the ToggleButton should be pressed.
defaultPressed	boolean	null	The default pressed value when not controlled by `pressed` and `onPressedChange` .
onPressedChange	(event: useToggleButtonChangeEvent) => void	null	Callback fired when the ToggleButton's pressed state changes.

State#

Defines valid state in useToggleButton.

name	type	default	description
pressed	boolean	null	The pressed state of the useToggleButton.

Exposes#

Defines the methods and properties exposed by useToggleButton.

name	type	default	description
state	useToggleButtonState	null	The state of the useToggleButton.
onChange	(event: useToggleButtonChangeEvent) => void	null	Callback fired when the useToggleButton's pressed state changes.

Events#

useToggleButtonChangeEvent

Event fired when the ToggleButton's checked state changes.

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

Types#

Instance

Instance of useToggleButton headless.

values
HeadlessInstance<useToggleButtonProps, useToggleButtonState, useToggleButtonExposes>