Select

Use cases:

• Selecting from a list of options
• Sorting
• Filtering

tip

If you want to allow the selection of multiple items check out the multiselect and categorized multiselect components.

To populate options from a Data Server or Request Server resource, slot an options datasource inside the select. For long reference lists, enable infinite-scroll so the dropdown loads pages on demand instead of holding the full result set in memory.

Example

SmallLarge

React

Declaration

<rapid-select>
  <rapid-option value="s">Small</rapid-option>
  <rapid-option value="l">Large</rapid-option>
</rapid-select>

Usage

@customElement({
  name: 'my-element',
  template: html`
    <rapid-select @change=${(x, ctx) => x.selectChanged(ctx.event)}>
      <rapid-option value="s">Small</rapid-option>
      <rapid-option value="l">Large</rapid-option>
    </rapid-select>
  `,
})
export class MyElement extends GenesisElement {
  selectChanged(e: Event) {
    alert('Select Changed', e.target.value)
  }
}

Genesis

Declaration

<Select>
  <ListboxOption value="s">Small</ListboxOption>
  <ListboxOption value="l">Large</ListboxOption>
</Select>

Usage

import { ListboxOption, Select } from '@genesislcap/rapid-design-system/react';

export function MyComponent() {
  const handleSelectChanged = (event) => {
    const target = event.target as HTMLInputElement;
    console.log(target.value);
  };

  return (
    <Select onChange={handleSelectChanged}>
      <ListboxOption value="s">Small</ListboxOption>
      <ListboxOption value="l">Large</ListboxOption>
    </Select>
  );
}

Angular

Declaration

<rapid-select>
  <rapid-option value="s">Small</rapid-option>
  <rapid-option value="l">Large</rapid-option>
</rapid-select>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
  selector: 'my-root',
  template: `
    <rapid-select (change)="onSelectChanged($event)">
      <rapid-option value="s">Small</rapid-option>
      <rapid-option value="l">Large</rapid-option>
    </rapid-select>
  `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent {
  onSelectChanged(event: Event) {
    console.log('Select changed', event.target.value);
  }
}

Options (rapid-option)

In order to use the component, you need to create a list of options for the user to select from. You create this list using <rapid-option>. You can define the following attributes for a <rapid-option>:

Name	Type	Description
disabled	boolean	Disables an option so that the user cannot interact with it, but the option is still visible
selected	boolean	Selects the option, so it turns to the selected mode
value	string	The value of the attribute

You can also use the repeat directive to create options dynamically in the code:

const sampleSelectOptions = [
  { label: 'Large', value: 'l' },
  { label: 'Small', value: 's' },
]

import { html, repeat } from '@genesislcap/web-core';
html`
  <rapid-select>
    ${repeat(
      (x) => x.sampleSelectOptions,
      html`
        <rapid-option value="${(x) => x.value}">${(x) => x.label}</rapid-option>
      `
    )}
  </rapid-select>
`

Grouping options (rapid-optgroup)

Use rapid-optgroup to organise options into labelled sections, the same way as the HTML <optgroup> element. Nest rapid-option elements inside each group (see attributes below).

rapid-select detects slotted rapid-optgroup elements, keeps the group headings in the dropdown for users, and still treats the nested options as a flat list for value and selection behaviour.

You can define the following attributes on rapid-optgroup:

Name	Type	Description
label	string	Text shown as the group heading in the dropdown. Also used for the accessible name of the nested options (aria-label on the inner group).
title	string	Optional. Standard HTML attribute; browsers show it as a tooltip when the user hovers the group row.
disabled	boolean	The component sets this when it connects so the group heading cannot become the rapid-select value. You normally leave it unset; nested rapid-option elements stay enabled unless you disable them individually.

<rapid-select>
  <rapid-option value="all">All items</rapid-option>
  <rapid-option value="sale">Sale</rapid-option>
  <rapid-optgroup label="Clothing" title="Hats, scarves, and similar">
    <rapid-option value="hat">Hat</rapid-option>
    <rapid-option value="scarf">Scarf</rapid-option>
  </rapid-optgroup>
  <rapid-optgroup label="Footwear">
    <rapid-option value="boots">Boots</rapid-option>
    <rapid-option value="trainers">Trainers</rapid-option>
  </rapid-optgroup>
</rapid-select>

You can mix grouped and ungrouped options: place standalone rapid-option elements alongside rapid-optgroup blocks as needed (as with All items and Sale above).

API

Property and attribute binding examples for Genesis Component syntax. Closing tag omitted.

Name	Type	Description	Example
disabled	boolean	Similar to readonly, but with a blur on the component.	<rapid-select disabled>
form	string	Associates this component with a form. Form id needs to be passed. If no Id is provided, then it will be associated with the ancestor form.	<rapid-select form="sampleForm">
name	string	Gives this component a name.	<rapid-select name="mySelect">
open	boolean	Defines whether the list starts opened or not. Default: false	<rapid-select open>
position	string	Places the list above or below the component; can be above or below. Default: it will try to fit with the page.	<rapid-select position="below">
size	number	Defines the display size of the list. For example, if you set size="2", then the list displays two items at a time for the user to scroll through; Default: it will try to fit with the page.	<rapid-select size=2>
value	string	Sets a value for this component.	<rapid-select value="s">

note

If you set the size, the list is displayed by default (the user does not need to click to view it). This overrides any setting you make for open.

Properties

This component doesn't have any properties which are not also controlled via attributes.

Slots

Name	Description
start	Content which can be provided before the button content
end	Content which can be provided after the button content
button-container	The element representing the select button
selected-value	The selected value
indicator	The visual indicator for the expand/collapse state of the button

Parts

Name	Description
control	The element representing the select invoking element
selected-value	The element wrapping the selected value
indicator	The element wrapping the visual indicator
listbox	The listbox element

Events fired

Name	Description
change	Fires a custom 'change' event when the value updates
input	Fires a custom 'input' event when the value updates

Events listened to

This component doesn't listen to any events.

Further details

This component is an implementation of a HTML select element.