Select

Oftentimes, displaying more than a single line of text may become necessary to help a user make a selection. That is why, within the q2-select component, there is the ability to provide robust content for each option. This feature allows you to override the default appearance by providing custom markup to display to the user within your q2-option components.

While this may be any standard HTML you would like, we strongly suggest using the q2-item component as it is built with several design patterns in mind.

<q2-select label="Account" multiline-options value="2">
  <q2-option value="1">
    <q2-item>
      <div slot="header">Checking Account</div>
      <q2-detail label="Account Number" description="xxxx-2376" slot="body">
        <q2-currency amount="12953.25"></q2-currency>
      </q2-detail>
      <q2-detail label="Current Balance" slot="body">
        <q2-currency amount="12953.25"></q2-currency>
      </q2-detail>
    </q2-item>
  </q2-option>
  <q2-option value="2">
    <q2-item>
      <div slot="header">Savings Account</div>
      <q2-detail label="Account Number" description="xxxx-4595" slot="body"></q2-detail>
      <q2-detail label="Current Balance" slot="body">
        <q2-currency amount="95321.16"></q2-currency>
      </q2-detail>
    </q2-item>
  </q2-option>
  <q2-option value="3">
    <q2-item>
      <div slot="header">Secret Account</div>
      <q2-detail label="Account Number" description="xxxx-8129" slot="body"></q2-detail>
      <q2-detail label="Current Balance" slot="body">
        <q2-currency amount="8451.13"></q2-currency>
      </q2-detail>
    </q2-item>
  </q2-option>
</q2-select>

Hiding content in the selected state

Once you make a selection, the content of the selected option will be displayed in the input field. If there are elements within the robust content that you would like to hide in the selected view, you can use the hide-on-select attribute to hide them.

Customizing the height

The minimum and maximum height of the q2-select component can be modified by customizing the following CSS variables:

• --tct-input-min-height - The minimum height of the input field. Defaults to 44px.
• --tct-input-max-height - The maximum height of the input field. Defaults to none.

Preventing robust content in the selected state

If you do not want the robust content to be displayed in the selected state, you can use the display attribute on the q2-option component, which will tell the q2-select component that you want that text to display instead of the robust content.

<q2-select label="Account" multiline-options value="2">
  <q2-option value="1" display="Checking account xxxx-2376">
    <q2-item>
      <div slot="header">Checking Account</div>
      <q2-detail label="Account Number" description="xxxx-2376" slot="body">
        <q2-currency amount="12953.25"></q2-currency>
      </q2-detail>
      <q2-detail label="Current Balance" slot="body">
        <q2-currency amount="12953.25"></q2-currency>
      </q2-detail>
    </q2-item>
  </q2-option>
  <q2-option value="2" display="Savings account XXXX-4595">
    <q2-item>
      <div slot="header">Savings Account</div>
      <q2-detail label="Account Number" description="xxxx-4595" slot="body"></q2-detail>
      <q2-detail label="Current Balance" slot="body">
        <q2-currency amount="95321.16"></q2-currency>
      </q2-detail>
    </q2-item>
  </q2-option>
  <q2-option value="3" display="Secret account xxxx-8129">
    <q2-item>
      <div slot="header">Secret Account</div>
      <q2-detail label="Account Number" description="xxxx-8129" slot="body"></q2-detail>
      <q2-detail label="Current Balance" slot="body">
        <q2-currency amount="8451.13"></q2-currency>
      </q2-detail>
    </q2-item>
  </q2-option>
</q2-select>

By default, if a q2-select element has the searchable attribute, it will search through the provided options and display any found results. You can, however, provide a custom search function as well.

Example HTML

<q2-select label="Field label" searchable oninput="customFilterExample(event)">
  <q2-option value="1" display="Option 1">Option 1</q2-option>
  <q2-option value="2" display="Option 2">Option 2</q2-option>
  <q2-option value="3" display="Option 3" disabled>Option 3</q2-option>
  <q2-option value="4" display="Option 4">Option 4</q2-option>
</q2-select>

Example JS

function customFilterExample(event) {
  var query = event.detail.query.trim().toLowerCase();
  var optionsArr = Array.prototype.slice.call(this.querySelectorAll('q2-option'));
  optionsArr.forEach(function(option) {
    if (query === '') {
      option.style.display = '';
    } else {
      var display = option.display.toLowerCase();
      var innerText = option.innerText.toLowerCase();
      var visible = display.includes(query) || innerText.includes(query);
      option.style.display = visible ? '' : 'none';
    }
  });
}

The popover in q2-select provides slots for custom content to be displayed persistently at the top and/or bottom of the popover menu.

Slot names:

• "popover-top"
• "popover-bottom"

Example HTML

<q2-select label="Select with Popover Slots">
  <q2-option value="1" display="Option 1">Option 1</q2-option>
  <q2-option value="2" display="Option 2">Option 2</q2-option>
  <q2-option value="3" display="Option 3">Option 3</q2-option>
  <q2-option value="4" display="Option 4">Option 4</q2-option>
  <q2-card slot='popover-top' avatar-icon="person-add" title="Add New User" description='Top Slot Content' type='clickable' is-small style='--tct-card-box-shadow: none'></q2-card>
  <div slot='popover-bottom' style='width: 100%; height: 40px;text-align: center; font-size: larger;'>Bottom Slot Content</div>
</q2-select>

The Q2-select component is a dropdown selection interface that allows users to choose from a predefined list of options. It provides a space-efficient way to present multiple choices while maintaining a clean, organized interface.

Primary Use Cases

Large Option Sets (5+ items) Use Q2-select when presenting 5 or more options to users. The dropdown format conserves screen real estate while providing easy access to all available choices.

Familiar Categories Ideal for commonly understood option sets such as:

• Countries, states, or cities
• Time zones or date ranges
• Product categories or types
• User roles or permissions
• File formats or data types

When NOT to Use Q2-Select

Critical Decisions Avoid for high-stakes choices where users benefit from seeing all options simultaneously to make informed comparisons.

Frequently Changed Settings Not ideal for options that users toggle frequently, as the interaction overhead outweighs the space savings.

Complex Relationships When option dependencies or mutual exclusions are complex, more transparent selection methods may be preferable.

Choose Q2-Select When:

Option Count is High

• 5+ options that would create vertical clutter as radio buttons
• Long lists that would require scrolling if displayed as radio buttons

Options Are Familiar

• Users already know the available choices (e.g., selecting their home state)
• Exploratory browsing of options is not a primary user need

Space Efficiency is Critical

• Dense forms or compact interfaces
• Mobile layouts where screen real estate is premium
• Dashboard or toolbar contexts

Choose Radio Selectors When:

Option Count is Low

• 2-4 options that can be displayed without overwhelming the interface
• Binary or near-binary choices

Comparison is Important

• Users need to evaluate trade-offs between options
• Relative differences between choices are crucial to decision-making

Immediate Visibility Required

• All options should be visible without interaction
• No cognitive load from remembering hidden options

Single-Line Content (Recommended Default)

Use concise, single-line labels when:

Labels Are Self-Explanatory

Options: Checking, Savings, Money Market, CD, IRA Priority: Low, Normal, High, Critical Status: Draft, Review, Approved, Published

Context Provides Clarity When the surrounding interface makes the option meaning clear without additional explanation.

Multi-Line Content (Use Selectively)

Implement robust, multi-line content when:

Options Require Explanation

`Basic Checking $9/month - Free with a Direct Deposit

Professional Checking
$29/month - Free with a Direct Deposit and a daily average balance of $5000, .05% APR

Gold Checking $99/month - Free Wires, dedicated account manager`

Differentiation is Complex When options have subtle but important differences that affect user decision-making.

Rich Context Improves Outcomes User research indicates that additional information leads to better selections and fewer errors.

• Default to the most commonly selected option when appropriate
• Provide search/filter functionality for lists over 10 items
• Consider using option groups for grouping related options with visual separators and labels