Radio

The ty-radio is an advanced custom radio button component designed with extensibility and customization in mind. It supports standard radio button behaviors while offering additional features like custom events and a disabled state.

The ty-radio-group is a robust custom component designed to group and manage multiple ty-radio buttons. It supports standard radio group behaviors while offering additional features like keyboard navigation, and form association.

Usage

To use ty-radio-group and ty-radio, include it in your HTML code and wrap your ty-radio elements within it. You can also specify the direction attribute for customizing the layout.

Live Editor

<ty-radio-group direction="column">
  <ty-radio name="option" value="a" label="A"> </ty-radio>
  <ty-radio name="option" value="b" label="B"> </ty-radio>
  <ty-radio name="option" value="c" label="C"> </ty-radio>
</ty-radio-group>

Result

Loading...

API

Properties

ty-radio-group

The ty-radio-group component accepts the following properties:

Name	Description	Type	Default
direction	The layout direction of the radio buttons	'row'	'column'

ty-radio

The ty-radio component accepts the following properties:

Name	Description	Type	Default
value	The value of the radio button	string	''
checked	Whether the radio button is checked or not	boolean	false
disabled	Whether the radio button is disabled or not	boolean	false
name	The name of the radio button (for grouping)	string	''

Events

ty-radio-group

Name	Description	Detail
ty-change	Fires when the radio changes	{ value: string }