Section

Updated:

Use for grouping related content with a header and optional collapse.

Development

Custom Header Content

Custom content can be injected into the section header using a named slot. The slot:

  • is not available if the label property is used.
  • can be leveraged by adding slot="q2-section-header" as an attribute to an item yielded within the element.
  • is primarily used for editable headers.
  • content should be wrapped in a header element to maintain semantic hierarchy. h2 is recommended here to maintain parity with standard sections

Section content

 
<q2-section>
  <h2 slot="q2-section-header">
    <q2-editable-field
      value="Custom header content"
    ></q2-editable-field>
  </h2>
  <p>Section content</p>
</q2-section>

Slots

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

Learn more about slots

An optional slot to display a custom header.

Properties

Learn more about properties.

collapsible

Determines if the section is collapsible.

expanded

Indicates if the q2-section is in an expanded state or not.

label

The text to display above the q2-section. Renders as an <h2> element.

It is also used to provided an aria-label for the toggle button when the component is collapsible.

If you are providing a custom header, setting this property is still strongly encouraged for the purposes of accessibility.

noCollapseIcon
no-collapse-icon

Determines if the collapse chevron icon should show in the q2-section header.

Events

The q2-section element exposes events that can be used to send and receive data from the component based on user interaction.

Learn more about events.

tctChange

Emitted when the section is expanded or collapsed.

Event Detail Type signature

{ expanded: boolean; }

If an event handler is bound to the element using:

  • ontctChange property - The default handler will not fire, and the value must be updated in the custom handler.
  • addEventListener("tctChange") method - The default handler will fire alongside the custom handler.

Methods

The q2-section element exposes methods that can be used to perform various actions on the component.

Learn more about methods.

collapse

Test only

A test method to collapse section.

Type signature

collapse() => Promise<void>

expand

Test only

A test method to expand section.

Type signature

expand() => Promise<void>

Patterns

Provide clean examples of how to compose multiple components together in order to achieve a specific visual outcome that is curated and maintained by Tecton.

Full-page patterns

  • Account Settings Page

    How to build an Account Settings page in Tecton: six independent settings sections covering nickname, notifications, statement delivery, card management, spending limits, and overdraft protection.

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-section 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!

Changelog

The changelog provides a detailed history of new features, improvements, and bug fixes going back to Tecton 1.30.0. If the button is disabled, it indicates there have been no detectable changes since then.

Show changelog (16)