RadioButton API

API documentation for RadioButton component

RadioButtonRoot#

Props#

Defines valid properties in RadioButton 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?: RadioButtonRootInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: RadioButtonRootInstance) => 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<RadioButtonRootPassThrough>	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: RadioButtonRootInstance) => ReactNode)	null	The children to render.
value	unknown	null	Value of the radio button.
name	string	null	The name of the radio button.
size	"small" \| "large" \| "normal"	null	Defines the size of the radio button.
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: RadioButtonRootChangeEvent) => void	null	Callback fired when the radio button'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 RadioButton component.

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

Exposes#

Defines the methods and properties exposed by RadioButton component.

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

Events#

RadioButtonRootChangeEvent

Event fired when the radio button's checked state changes.

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

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of RadioButton component.

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

Types#

Instance

Instance of RadioButton component.

values
ComponentInstance<RadioButtonRootProps, RadioButtonRootState, RadioButtonRootExposes>

RadioButtonGroup#

Props#

Defines valid properties in RadioButtonGroup 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?: RadioButtonGroupInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: RadioButtonGroupInstance) => 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<RadioButtonGroupPassThrough>	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: RadioButtonGroupInstance) => ReactNode)	null	The children to render.
name	string	null	The name of the radio buttons.
disabled	boolean	false	When present, it specifies that the radio button group should be disabled.
invalid	boolean	false	When present, it specifies that the radio button group is invalid.
onValueChange	(event: RadioButtonGroupChangeEvent) => void	null	Callback fired when the checkboxgroup's value state changes.
value	unknown	null	Value of the radio button group.
defaultValue	unknown	null	The default value of the radio button group.
[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 RadioButtonGroup component.

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

Exposes#

Defines the methods and properties exposed by RadioButtonGroup component.

name	type	default	description
state	useRadioButtonGroupState	null	The state of the useRadioButtonGroup.
updateChange	(event: useRadioButtonChangeEvent<SyntheticEvent<Element, Event>> & { value: unknown }) => void	null	Updates the value of the radio button group.

Events#

RadioButtonGroupChangeEvent

Event fired when the radio button's checked state changes.

name	type	description
value	unknown	Value of the radio button.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of RadioButtonGroup component.

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

Types#

Instance

Instance of RadioButtonGroup component.

values
ComponentInstance<RadioButtonGroupProps, RadioButtonGroupState, RadioButtonGroupExposes>

useRadioButton#

Props#

Defines valid properties in useRadioButton.

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: useRadioButtonChangeEvent) => void	null	Callback fired when the radio button's checked state changes.

State#

Defines valid state in useRadioButton.

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

Exposes#

Defines the methods and properties exposed by useRadioButton.

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

Events#

useRadioButtonChangeEvent

Event fired when the radio button's checked state changes.

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

Types#

Instance

Instance of useRadioButton headless.

values
HeadlessInstance<useRadioButtonProps, useRadioButtonState, useRadioButtonExposes>