Option

Updated:

Use as a selectable item within Select, Dropdown, Tag, or Pill components.

Properties

The q2-option 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

Disables the option.

display

The text that is displayed in the field when selected. If not provided, any text inside the element will be used.

Localizable
separator

Renders a line in the item instead of text. Click events from these items will not have details provided. A separator allows for quick visual grouping of items, so interactions should not be bound to these options.

value

Serves as the option's value.

Events

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

Learn more about events.

tctClick

Is emitted when the option is clicked.

Event Detail Type signature

{ type: "select" | "remove"; value: string; }

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.

  • Funds Transfer Page

    How to build a Funds Transfer form in Tecton: a single-column transfer with rich account options, a recurrence schedule, and client-side validation.

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

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-action-sheet
  • q2-pagination

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 (18)