Checkbox Group

Updated:: 3/3/2026

Use for selecting multiple options from a set of checkboxes.

Slots

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

An optional slot to display a custom label.

Properties

The q2-checkbox-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 checkboxes 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

The label that displays above all the checkboxes.

Localizable

optional

Determines if the component is marked as optional.

readonly

Determines if all the checkboxes are marked as readonly.

value

Can be used to get and set the checked status of each <q2-checkbox> element contained within the group.

Example:

element.value = {
  'checkbox-value-1': true,
  'checkbox-value-2': false,
  'checkbox-value-3': true,
};

// Also accepts partial values
element.value = {
  'checkbox-value-2': false,
}

Events

The q2-checkbox-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 checkbox selection changes.

Event Detail Type signature

any

tctChange

Emitted when the checkbox selection changes.

Event Detail Type signature

any

Methods

The q2-checkbox-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-checkbox> option(s) with the provided value.

Type signature

setValue(values: string | 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-checkbox-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!

q2-icon