tuix-radio-button

One element renders the whole group: it maps options to one radio each.

Loading the components…

const radio = document.querySelector('tuix-radio-button')
 
radio.options = ['Draft', 'Sent', 'Paid'] // property: it is an array
radio.selectedOption = 'Sent'
 
radio.addEventListener('change', (event) => console.log(event.detail.value))

States

Loading the components…

error is ignored while the group is disabled.

API

Properties

Property	Attribute	Type	Default	Description
`options`	`options`	`(string \| number)[]`	`[]`	One radio per entry. Property, or JSON in the attribute
`selectedOption`	`selectedoption`	`string \| number \| null`	`null`	The checked option
`labelSide`	`labelside`	`CheckboxLabelSide`	`right`	`left` or `right`
`disabled`	`disabled`	`boolean`	`false`	Blocks the whole group
`error`	`error`	`boolean`	`false`	Red dots and labels. Ignored while disabled
`dark`	`dark`	`boolean`	`false`	Dark palette

Events

Event	Detail	When
`change`	`{ value: string }`	Another option is picked

The detail carries the option as the DOM reports it, so a numeric option arrives as a string. Typed as CustomEventTuixRadioButton.

The group does not own its selection: the browser checks the radio that was clicked, but selectedOption stays what the application last set, so write the new value back in the handler.

Slots

Slot	Content
`label-{index}`	Replaces the label of the option at that index, counting from 0

<tuix-radio-button>
    <tuix-text slot="label-0" size="field_placeholder">Pay now</tuix-text>
    <tuix-text slot="label-1" size="field_placeholder">Pay in 30 days</tuix-text>
</tuix-radio-button>

Each element is one complete group. Its inputs do share the name tuix-radio-button, but they sit in the element's own shadow root, and a native radio group never reaches across two of those, so two tuix-radio-button elements on a page are independent and need no distinct name. The same boundary is why a single group cannot be split over two elements: every option of one group belongs in one options array.

tuix-radio-button

States

Label side

API

Properties

Events

Slots

On this page