Radio Component

A radio button component.

Properties

Name	Type	Default	Description
checked	boolean	false	Indicates whether the radio button is checked.
disabled	boolean	false	Indicates whether the radio button is disabled.
value	string	''	The value of the radio button.

CSS Parts

Name	Description
radio	The main container for the radio button.

Check this link to learn how to use CSS parts for Radio Component.

CSS Properties

Token	Default	Description
--tap-radio-border-radius	--tap-sys-radius-full	The border radius of the radio button.
--tap-radio-height	--tap-sys-spacing-7	The height of the radio button.
--tap-radio-width	--tap-sys-spacing-7	The width of the radio button.
--tap-radio-background-color	--tap-sys-color-surface-primary	The background color of the radio button.
--tap-radio-border	--tap-sys-color-border-inverse-primary	The border color of the radio button.
--tap-radio-checked-background-color	--tap-sys-color-surface-inverse-primary	The background color of the checked radio button.
--tap-radio-checked-color	--tap-sys-color-content-on-inverse	The color of the content inside the checked radio button.
--tap-radio-disabled-background-color	--tap-sys-color-surface-disabled	The background color of the disabled radio button.
--tap-radio-disabled-border-color	--tap-sys-color-surface-disabled	The border color of the disabled radio button.
--tap-radio-disabled-color	--tap-sys-color-content-disabled	The color of the content inside the disabled radio button.
--tap-radio-input-height	--tap-sys-spacing-7	The height of the radio button input.
--tap-radio-input-width	--tap-sys-spacing-7	The width of the radio button input.

Events

Name	Description
radio-input-change	Fires when a radio option is selected