Radio Group

Updated:

Use for selecting exactly one option from a small set of choices.

Slots

The q2-radio-group element has one slot that can be used to insert custom content into the component.

Learn more about slots

An optional slot to display a custom label.

Properties

The q2-radio-group element has one or more properties that support text localization. Those properties are indicated by the localizable badge in the description.

Learn more about properties.

disabled

Determines if all radios in the group are put into a disabled state.

hasError
has-error

Determines if the component should display in an errant state.

hideLabel
hide-label

Hide's the group's <label> element from view.

Only use when a visible label is impractical.

label

Text for the fieldset legend describing the radio group.

Localizable
name

Identifier which ties all radios together for accessibility and DOM selection.

optional

Appends "(optional)" to the group label, and sets aria-required on the nested input tag to false.

readonly

Determines if all radios in the group can be focused, but not interacted with.

tileAlignment
tile-alignment

Provides alignment direction for tile-style radio group.

tileLayout
tile-layout

Show the radio group as a horizontal set of tiles.

value

The value of the currently selected q2-radio within the q2-radio-group.

Events

The q2-radio-group element exposes events that can be used to send and receive data from the component based on user interaction.

Learn more about events.

change

Emitted when the value of the radio group changes.

Event Detail Type signature

{ value: string; }

If an event handler is bound to the element using:

  • onchange property - The default handler will not fire, and the value must be updated in the custom handler.
  • addEventListener("change") method - The default handler will fire alongside the custom handler.

tctChange

Emitted when the value of the radio group changes.

Event Detail Type signature

{ value: string; }

If an event handler is bound to the element using:

  • ontctChange property - The default handler will not fire, and the value must be updated in the custom handler.
  • addEventListener("tctChange") method - The default handler will fire alongside the custom handler.

Methods

The q2-radio-group element exposes methods that can be used to perform various actions on the component.

Learn more about methods.

setValue

Test only

Emulates clicking the <q2-radio> option with the provided value.

Type signature

setValue(value: string) => Promise<void>

Accessibility

Accessibility Report

Tecton components are designed and tested to be WCAG compliant when used appropriately, and do not get released without proper validation. Developers should prefer not to set ARIA attributes when using components from the Tecton Design System.

CSS Variables

The following CSS variables are available to override the default theme styles of the q2-radio-group component.

Dependencies

Many Tecton components consume other components to maintain visual and functional consistency. If you are looking for a CSS variable you think should exist but are not seeing it, it may be defined in one of the dependent components below. Either way, if you think it's something we should expose more conveniently, let us know!