Switch Group

1.19.0

Groups related switches with a shared label, hint text, and validation state.

import {SwitchGroupModule} from "@qualcomm-ui/angular/switch-group"

Examples

Simple

Use the simple API to create a switch group using minimal markup.

If you omit the label, you should provide an aria-label to keep your group accessible.

Notifications

Email SMS Push

Select at least one

<fieldset hint="Select at least one" label="Notifications" q-switch-group>
  <label label="Email" q-switch></label>
  <label label="SMS" q-switch></label>
  <label label="Push" q-switch></label>
</fieldset>

Composite

The composite API exposes FieldGroup directives for granular control over the group structure.

Notifications

Email SMS Push

Select at least one

<fieldset q-field-group-root>
  <legend q-field-group-label>Notifications</legend>
  <div q-field-group-items>
    <label label="Email" q-switch></label>
    <label label="SMS" q-switch></label>
    <label label="Push" q-switch></label>
  </div>
  <div q-field-group-hint>Select at least one</div>
</fieldset>

Size

The size input controls the size of child switches. Available sizes are sm, md (default), and lg.

import {Component} from "@angular/core"

import {SwitchModule} from "@qualcomm-ui/angular/switch"
import {SwitchGroupModule} from "@qualcomm-ui/angular/switch-group"

@Component({
  imports: [SwitchGroupModule, SwitchModule],
  selector: "switch-group-size-demo",
  template: `
    <div class="flex flex-row gap-8">
      <fieldset label="Small" q-switch-group size="sm">
        <label label="Email" q-switch></label>
        <label label="SMS" q-switch></label>
      </fieldset>
      <fieldset label="Medium" q-switch-group size="md">
        <label label="Email" q-switch></label>
        <label label="SMS" q-switch></label>
      </fieldset>
      <fieldset label="Large" q-switch-group size="lg">
        <label label="Email" q-switch></label>
        <label label="SMS" q-switch></label>
      </fieldset>
    </div>
  `,
})
export class SwitchGroupSizeDemo {}

Orientation

Use the orientation input to control the layout direction of the group. Options include:

vertical: switches are laid out in a column (default).
horizontal: switches are laid out in a row.

Notifications

Email SMS Push

<fieldset label="Notifications" orientation="horizontal" q-switch-group>
  <label label="Email" q-switch></label>
  <label label="SMS" q-switch></label>
  <label label="Push" q-switch></label>
</fieldset>

Indented

Set indented to add padding at the start of the group.

Notifications

Email SMS Push

<fieldset indented label="Notifications" q-switch-group>
  <label label="Email" q-switch></label>
  <label label="SMS" q-switch></label>
  <label label="Push" q-switch></label>
</fieldset>

Hint

Use hint to add additional guidance or context to the user below the group.

Notifications

Email SMS Push

Select at least one

<fieldset hint="Select at least one" label="Notifications" q-switch-group>
  <label label="Email" q-switch></label>
  <label label="SMS" q-switch></label>
  <label label="Push" q-switch></label>
</fieldset>

Error Text

Set invalid and errorText to display validation errors. The error text replaces the hint when present.

Notifications

Email SMS

Select at least one option

<fieldset
  errorText="Select at least one option"
  invalid
  label="Notifications"
  q-switch-group
>
  <label label="Email" q-switch></label>
  <label label="SMS" q-switch></label>
</fieldset>

Explorer

Component Anatomy

Hover to highlight, click to view API

root label items hint

API

q-switch-group

The q-switch-group directive extends q-field-group-root with the following inputs:

Groups multiple switches with a label, hint, and error text.

Prop	Type
errorText Error message displayed when invalid.	string
hint Helper text displayed below items. Hidden when invalid.	string
label Group label text.	string

errorText

Type

string

Description

Error message displayed when invalid.

hint

Type

string

Description

Helper text displayed below items. Hidden when invalid.

label

Type

string

Description

Group label text.

Composite API

q-field-group-root

Root container for the field group. Use with a <fieldset> element.

Prop	Type	Default
indented Adds padding at the start of the items container.	boolean	false
invalid Marks the group as invalid.	boolean	false
orientation Layout direction for items.	\| 'vertical' \| 'horizontal'	'vertical'
size The size of the group items.	\| 'sm' \| 'md' \| 'lg'	'md'

indented

Type

boolean

Description

Adds padding at the start of the items container.

invalid

Type

boolean

Description

Marks the group as invalid.

orientation

Type

| 'vertical'
| 'horizontal'

Description

Layout direction for items.

size

Type

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

Description

The size of the group items.

Attribute / Property	Value
`class`	'qui-field-group__root'
`data-field-group-part`	'root'
`data-invalid`

q-field-group-label

Label for the field group. Use with a <legend> element inside a fieldset.

Attribute / Property	Value
`class`	'qui-field-group__label'
`data-field-group-part`	'label'

q-field-group-items

Container for the field group items.

Attribute / Property	Value
`class`	'qui-field-group__items'
`data-field-group-part`	'items'
`data-indented`
`data-orientation`	\| 'vertical' \| 'horizontal'
`data-size`	\| 'sm' \| 'md' \| 'lg'