Checkbox

Updated:

Provides standard checkboxes and toggle switches.

Custom Label Content

The q2-checkbox supports the use of custom content that will be treated as the label of the field.

Content can be yielded here
Formatting is flexible with this content and other elements can be placed here, even icons. . 
<q2-checkbox>
  <div>
    <strong>Content can be yielded here</strong>
  </div>
  <div>
    Formatting is <em>flexible</em> with this content and other elements can be placed here, even icons.
    <q2-icon type="search" inline></q2-search-icon>.
  </div>
</q2-checkbox>

Properties

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

alignment

Determine which side of the label the checkbox will render on.

checked

The state of the checkbox. This modifies the visual appearance of the element.

description

Populates a description that is displayed beneath the label.

Localizable
disabled

Disables the checkbox and prevents interaction.

hasError
has-error

Determines if the component should display in an errant state.

hideLabel
hide-label

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

Only use when a visible label is impractical.

indeterminate

Used on a parent checkbox in a checkbox group (e.g. "Select All") to indicate that some, but not all, checkboxes in a group are checked.

When true, the "indeterminate" selection style is applied. To apply the standard "checked" selection style, checked must be true, and indeterminate must be false.

label

The visible label text for the checkbox. Appears to the right of the box for 'default' and 'favorite' checkboxes, and to the left for 'toggle' checkboxes. Yielded content will be adjacent to this text.

Localizable
name

A static string used to establish a symbolic relationship between checkboxes.

readonly

The field is not interactive, but remains focusable.

slotReadonly
slot-readonly

The field is not interactive, but remains focusable.

type

The visual style of the checkbox. This does not need to be defined for a standard checkbox.

value

A static reference value for the checkbox.

Events

The q2-checkbox 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 is toggled.

Event Detail Type signature

{ value: string; checked: boolean; }

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.

Dependencies

This component uses other components in the Tecton library, including:

  • q2-icon

Dependents

Other components in the Tecton library use this component, including:

  • q2-data-table

Release Notes

Add support for ellipcized labels

Initial Release

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.

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

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

    • There is 1 frequently asked question related to this page.