Dropdown Item

Updated:

Used as options for the q2-dropdown component.

Must be used in combination with Q2 Dropdown.

Properties

The q2-dropdown-item 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 interaction with the item and blocks its click event.

label

The text that appears within the dropdown item.

This will be used as the aria-label for this item.

Localizable
removable

Renders an icon button in the item. Clicking on this button will change the type on the item's click event detail to "remove".

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

A static reference value for the item. This value is returned in the click event detail.

Events

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

Learn more about events.

click

Is emitted when the item is clicked.

Event Detail Type signature

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

tctClick

Is emitted when the item is clicked.

Event Detail Type signature

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

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-dropdown

Release Notes

Initial Release

Adjusting the Height

The minimum height of dropdown items can be changed from the default of 44px via the --tct-dropdown-item-min-height custom property. 44px is the default because it is the WCAG 2.1 AAA recommended minimum target size. If the size needs to be adjusted downward it should not be set to less than 24px to ensure future compatibility with the WCAG 2.2 AA recommended minimum target size of 24px.

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-dropdown-itemcomponent.

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