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.

Example

SmallLarge

Genesis

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)
  }
}

React

Declaration

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

Usage

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

  return (
    <rapid-select onChange={handleSelectChanged}>
      <rapid-option value="s">Small</rapid-option>
      <rapid-option value="l">Large</rapid-option>
    </rapid-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);
  }
}

Option attributes

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

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.