Checkbox Group

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

import {CheckboxGroupModule} from "@qualcomm-ui/angular/checkbox-group"

Examples

Simple

Use the simple API to create a checkbox 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-checkbox-group>
  <label label="Email" q-checkbox></label>
  <label label="SMS" q-checkbox></label>
  <label label="Push" q-checkbox></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-checkbox></label>
    <label label="SMS" q-checkbox></label>
    <label label="Push" q-checkbox></label>
  </div>
  <div q-field-group-hint>Select at least one</div>
</fieldset>

Size

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

import {Component} from "@angular/core"

import {CheckboxModule} from "@qualcomm-ui/angular/checkbox"
import {CheckboxGroupModule} from "@qualcomm-ui/angular/checkbox-group"

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

Orientation

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

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

Notifications

Email SMS Push

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

Indented

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

Notifications

Email SMS Push

<fieldset indented label="Notifications" q-checkbox-group>
  <label label="Email" q-checkbox></label>
  <label label="SMS" q-checkbox></label>
  <label label="Push" q-checkbox></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-checkbox-group>
  <label label="Email" q-checkbox></label>
  <label label="SMS" q-checkbox></label>
  <label label="Push" q-checkbox></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-checkbox-group
>
  <label label="Email" q-checkbox></label>
  <label label="SMS" q-checkbox></label>
</fieldset>

API

q-checkbox-group

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

Groups multiple checkboxes 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-invalid`
`data-part`	'root'
`data-scope`	'field-group'

class

Value

'qui-field-group__root'

data-invalid

Value

data-part

Value

'root'

data-scope

Value

'field-group'

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-part`	'label'
`data-scope`	'field-group'

q-field-group-items

Container for the field group items.

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

class

Value

'qui-field-group__items'

data-indented

Value

data-orientation

Value

| 'vertical'
| 'horizontal'

data-part

Value

'items'

data-scope

Value

'field-group'

data-size

Value

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

q-field-group-hint

Hint text displayed below the field group items.

Attribute / Property	Value
`class`	'qui-field-group__hint'
`data-part`	'hint'
`data-scope`	'field-group'

q-field-group-error-text

Error message displayed when the field group is invalid.

Prop	Type	Default
icon Error indicator icon.	\| LucideIconData \| string	CircleAlert

icon

Type

| LucideIconData
| string

Description

Error indicator icon.

Attribute / Property	Value
`class`	'qui-field-group__error-text'
`data-part`	'error-text'
`data-scope`	'field-group'

Last updated on Feb 16, 2026 by Olaf Kappes

Checkbox

Combobox