Checkbox API

API documentation for Checkbox component

Checkbox#

Props#

Defines valid properties in CheckboxRoot 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?: CheckboxRootInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: CheckboxRootInstance) => 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<CheckboxRootPassThrough>	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: CheckboxRootInstance) => ReactNode)	null	The children to render.
value	unknown	null	Value of the checkbox.
name	string	null	The name of the checkbox.
size	"small" \| "large" \| "normal"	null	Defines the size of the checkbox.
variant	"outlined" \| "filled"	null	Specifies the input variant of the component.
disabled	boolean	false	When present, it specifies that the element should be disabled.
readOnly	boolean	false	When present, it specifies that an input field is read-only.
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 checkbox is focused.
onBlur	(event: FocusEvent<HTMLInputElement>) => void	null	Callback function that is called when the checkbox loses focus.
onCheckedChange	(event: CheckboxRootChangeEvent) => void	null	Callback fired when the checkbox'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` .
indeterminate	boolean	false	When present, it specifies input state as indeterminate.
trueValue	string \| number \| boolean	true	Value in checked state.
falseValue	string \| number \| boolean	false	Value in unchecked state.
[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 CheckboxRoot component.

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

Exposes#

Defines the methods and properties exposed by CheckboxRoot component.

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

Events#

CheckboxRootChangeEvent

Event fired when the checkbox's checked state changes.

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

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of CheckboxRoot component.

name	type	default	description
root	CheckboxRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.
input	CheckboxRootPassThroughType<InputHTMLAttributes<HTMLInputElement>>	null	Used to pass attributes to the input's DOM element.
box	CheckboxRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the box's DOM element.
icon	CheckboxRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the icon's DOM element.

Types#

Instance

Instance of CheckboxRoot component.

values
ComponentInstance<CheckboxRootProps, CheckboxRootState, CheckboxRootExposes>

useCheckbox#

Props#

Defines valid properties in useCheckbox.

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` .
indeterminate	boolean	false	When present, it specifies input state as indeterminate.
trueValue	string \| number \| boolean	true	Value in checked state.
falseValue	string \| number \| boolean	false	Value in unchecked state.
onCheckedChange	(event: useCheckboxChangeEvent) => void	null	Callback fired when the checkbox's checked state changes.

State#

Defines valid state in useCheckbox.

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

Exposes#

Defines the methods and properties exposed by useCheckbox.

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

Events#

useCheckboxChangeEvent

Event fired when the checkbox's checked state changes.

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

Types#

Instance

Instance of useCheckbox headless.

values
HeadlessInstance<useCheckboxProps, useCheckboxState, useCheckboxExposes>