Radio

A control element that allows the user to choose only one of a predefined set of mutually exclusive options. The singular property of a radio button makes it distinct from checkboxes, where the user can select and unselect any number of items.

import {RadioModule} from "@qualcomm-ui/angular/radio"

Examples

Simple

The simple API bundles all Radio Item subcomponents together into a single q-radio directive.

Brand

<fieldset defaultValue="html" name="language" q-radio-group>
  <div q-radio-group-label>Language</div>
  <div q-radio-group-items>
    <label label="HTML" q-radio value="html"></label>
    <label label="CSS" q-radio value="css"></label>
    <label label="TypeScript" q-radio value="ts"></label>
  </div>
</fieldset>

Child Directives

Provide child directives to customize specific elements while keeping the simple API's default structure.

Brand

<fieldset defaultValue="html" name="language" q-radio-group>
  <div q-radio-group-label>Language</div>
  <div q-radio-group-items>
    <label q-radio value="html">
      <div q-radio-label>HTML</div>
    </label>
    <label q-radio value="css">
      <div q-radio-label>CSS</div>
    </label>
    <label q-radio value="ts">
      <div q-radio-label>TypeScript</div>
    </label>
  </div>
</fieldset>

Composite

Build with the composite API for granular control. This API requires you to provide each subcomponent, but gives you full control over the structure and layout.

Brand

<fieldset defaultValue="html" name="language" q-radio-group>
  <div q-radio-group-label>Language</div>
  <div q-radio-group-items>
    <label q-radio-root value="html">
      <input q-radio-hidden-input />
      <div q-radio-control></div>
      <span q-radio-label>HTML</span>
    </label>
    <label q-radio-root value="css">
      <input q-radio-hidden-input />
      <div q-radio-control></div>
      <span q-radio-label>CSS</span>
    </label>
    <label q-radio-root value="ts">
      <input q-radio-hidden-input />
      <div q-radio-control></div>
      <span q-radio-label>TypeScript</span>
    </label>
  </div>
</fieldset>

Layout

Use the composite API when you need to modify the layout of the radio buttons.

Brand

<fieldset defaultValue="html" name="language" q-radio-group>
  <div q-radio-group-label>Language</div>
  <div q-radio-group-items>
    <label q-radio-root value="html">
      <input q-radio-hidden-input />
      <span q-radio-label>HTML</span>
      <div q-radio-control></div>
    </label>
    <label q-radio-root value="css">
      <input q-radio-hidden-input />
      <span q-radio-label>CSS</span>
      <div q-radio-control></div>
    </label>
    <label q-radio-root value="ts">
      <input q-radio-hidden-input />
      <span q-radio-label>TypeScript</span>
      <div q-radio-control></div>
    </label>
  </div>
</fieldset>

Disabled

When disabled is true, the radio group becomes non-interactive and is rendered with reduced opacity to indicate its unavailable state.

Brand

Disabled

<fieldset defaultValue="html" disabled name="language" q-radio-group>
  <div q-radio-group-label>Language</div>
  <div q-radio-group-items>
    <label label="HTML" q-radio value="html"></label>
    <label label="CSS" q-radio value="css"></label>
    <label label="TypeScript" q-radio value="ts"></label>
  </div>
</fieldset>

Orientation

Controls the layout direction of radio buttons within the group.

Brand

<fieldset name="language" orientation="horizontal" q-radio-group>
  <div q-radio-group-label>Language</div>
  <div q-radio-group-items>
    <label label="HTML" q-radio value="html"></label>
    <label label="CSS" q-radio value="css"></label>
    <label label="TypeScript" q-radio value="ts"></label>
  </div>
  <div q-radio-group-error-text>You must select a value</div>
</fieldset>

Sizes

The radio supports three sizes: sm, md (default), and lg.

Brand

small (sm) medium (md) large (lg)

Forms

Template Forms

When using template-driven forms with ngModel, enable validation by adding the required attribute directly to the template:

Guidelines:

When using template forms, add the required attribute to trigger validation
The component automatically handles validation state checking
The q-radio-group-error-text directive displays automatically when the field is invalid and the user has interacted with it

Full example:

Brand

<div name="language" q-radio-group required [(ngModel)]="value">
  <div q-radio-group-label>Language</div>
  <div q-radio-group-items>
    <label label="HTML" q-radio value="html"></label>
    <label label="CSS" q-radio value="css"></label>
    <label label="TypeScript" q-radio value="ts"></label>
  </div>
  <div q-radio-group-error-text>You must select a value</div>
</div>

Reactive Forms

Use Reactive Forms instead of Template-driven Forms for better control over form state and validation.

Brand

<fieldset formControlName="language" q-radio-group>
  <div q-radio-group-label>Language</div>
  <div q-radio-group-items>
    <label label="HTML" q-radio value="html"></label>
    <label label="CSS" q-radio value="css"></label>
    <label label="TypeScript" q-radio value="ts"></label>
  </div>
  <div q-radio-group-error-text>You must select a value</div>
</fieldset>

Composition

RadioGroup

The Radio is only intended to be used as direct descendants of the q-radio-group directive.

<!-- Won't work alone ❌ -->
<label q-radio label="Label" value="value"></label>

<!-- Works as expected ✅ -->
<fieldset q-radio-group>
  <label q-radio label="Label" value="value"></label>
</fieldset>

Radio buttons are designed for groups. For single toggle controls, use the Checkbox component instead.

Composite Components

The Radio's composite components are only intended to be used as direct descendants of the q-radio-root directive.

<!-- Won't work alone ❌ -->
<input q-radio-hidden-input />
<span q-radio-control></span>
<span q-radio-label>Label</span>

<!-- Works as expected ✅ -->
<label q-radio-root value="value">
  <input q-radio-hidden-input />
  <span q-radio-control></span>
  <span q-radio-label>Label</span>
</label>

API

q-radio-group

Prop	Type	Default
defaultValue The initial value of the radio group when rendered. Use when you don't need to control the state of the radio group. This property will be ignored if you opt into controlled state via form control bindings.	string
dir The document's text/writing direction.	'ltr' \| 'rtl'	"ltr"
disabled Controls whether the input is disabled in template-driven forms. When true, prevents user interaction and applies visual styling to indicate the disabled state.	boolean
getRootNode A root node to correctly resolve the Document in custom environments. i.e., Iframes, Electron.	() => \| Node \| ShadowRoot \| Document
id id attribute. If omitted, a unique identifier will be generated for accessibility.)	string
name The name of the input field in a radio group. Useful for form submission.	string
orientation Orientation of the radio group	\| 'horizontal' \| 'vertical'	'vertical'
readOnly Whether the input is read-only. When true, prevents user interaction while keeping the input focusable and visible.	boolean
required Controls whether the input is required in template-driven forms. When true, the input must have a value for form validation to pass.	boolean
size The size of the radio and its elements. Governs properties like label font size, control size, and indicator size.	\| 'sm' \| 'md' \| 'lg'	'md'
(valueChanged) Event emitted when the radio is selected or deselected. This is only emitted on interaction. It doesn't emit in response to programmatic or form control changes.	string

defaultValue

Type

string

Description

The initial value of the radio group when rendered. Use when you don't need to control the state of the radio group. This property will be ignored if you opt into controlled state via form control bindings.

dir

Type

'ltr' | 'rtl'

Description

The document's text/writing direction.

disabled

Type

boolean

Description

Controls whether the input is disabled in template-driven forms. When true, prevents user interaction and applies visual styling to indicate the disabled state.

getRootNode

Type

() =>
| Node
| ShadowRoot
| Document

Description

A root node to correctly resolve the Document in custom environments. i.e., Iframes, Electron.

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.)

name

Type

string

Description

The name of the input field in a radio group. Useful for form submission.

orientation

Type

| 'horizontal'
| 'vertical'

Description

Orientation of the radio group

readOnly

Type

boolean

Description

Whether the input is read-only. When true, prevents user interaction while keeping the input focusable and visible.

required

Type

boolean

Description

Controls whether the input is required in template-driven forms. When true, the input must have a value for form validation to pass.

size

Type

| 'sm'
| 'md'
| 'lg'

Description

The size of the radio and its elements. Governs properties like label font size, control size, and indicator size.

(valueChanged)

Type

string

Description

Event emitted when the radio is selected or deselected. This is only emitted on interaction. It doesn't emit in response to programmatic or form control changes.

q-radio

The q-radio directive supports all props from q-radio-root directive, plus the props listed below.

Prop	Type
label Optional label describing the element. Recommended. This element is automatically associated with the component's input element for accessibility.	string

label

Type

string

Description

Optional label describing the element. Recommended. This element is automatically associated with the component's input element for accessibility.

Composite API

q-radio-root

Prop	Type	Default
value ^* The value of the radio input. This is used to identify which radio is selected in a group.	string
disabled Controls whether the input is disabled in template-driven forms. When true, prevents user interaction and applies visual styling to indicate the disabled state.	boolean

id id attribute. If omitted, a unique identifier will be generated for accessibility.)	string
size The size of the radio and its elements. Governs properties like label font size, control size, and indicator size.	\| 'sm' \| 'md' \| 'lg'	'md'

value

Type

string

Description

The value of the radio input. This is used to identify which radio is selected in a group.

disabled

Type

boolean

Description

Controls whether the input is disabled in template-driven forms. When true, prevents user interaction and applies visual styling to indicate the disabled state.

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.)

size

Type

| 'sm'
| 'md'
| 'lg'

Description

The size of the radio and its elements. Governs properties like label font size, control size, and indicator size.

Password Input

Select