Combobox

A combo-box is an input with an associated pop-up that enables users to select one value from a collection of possible values.

Use cases:

• Selecting pre-defined values
• Sorting
• Filtering

Example

SmallMediumLarge

Genesis

Declaration

<rapid-combobox>
  <rapid-option value="s">Small</rapid-option>
  <rapid-option value="m">Medium</rapid-option>
  <rapid-option value="l">Large</rapid-option>
</rapid-combobox>

Usage

@customElement({
  name: 'my-element',
  template: html`
    <rapid-combobox
      @change=${x => x.selectChanged()}
      value=${sync((x) => x.comboboxValue)}>
      <rapid-option value="s">Small</rapid-option>
      <rapid-option value="m">Medium</rapid-option>
      <rapid-option value="l">Large</rapid-option>
    </rapid-combobox>
  `,
})
export class MyElement extends GenesisElement {
  @observable comboboxValue = '';
  selectChanged() {
    console.log('Combobox selection changed ' + this.comboboxValue)
  }
}

React

Declaration

<rapid-combobox>
  <rapid-option value="s">Small</rapid-option>
  <rapid-option value="m">Medium</rapid-option>
  <rapid-option value="l">Large</rapid-option>
</rapid-combobox>

Usage

export function MyComponent() {

  const [outputValue, setOutputValue] = useState('');

  const onChange = (event) => {
    setOutputValue(event.target.value);
    console.log(outputValue);
  }

  return (
    <rapid-combobox onChange={onChange}>
      <rapid-option value="s">Small</rapid-option>
      <rapid-option value="m">Medium</rapid-option>
      <rapid-option value="l">Large</rapid-option>
    </rapid-combobox>
  );
}

Angular

Declaration

<rapid-combobox>
  <rapid-option value="s">Small</rapid-option>
  <rapid-option value="m">Medium</rapid-option>
  <rapid-option value="l">Large</rapid-option>
</rapid-combobox>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
  selector: 'my-root',
  template: `
        <rapid-combobox (change)="onChange($event)">
          <rapid-option value="s">Small</rapid-option>
          <rapid-option value="m">Medium</rapid-option>
          <rapid-option value="l">Large</rapid-option>
        </rapid-combobox>
      `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  imports: [FormsModule],
})
export class AppComponent {
  onChange(event: Event) {
    const target = event.target as HTMLInputElement;
    console.log(target.value);
  }
}

API

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

Name	Type	Description	Example
autocomplete	"inline" | "list" | "both" | "none"	Defines how autocompletion works in the component. Default: none	<rapid-combobox autocomplete="inline">
case-sensitive	boolean	Sets whether to treat values in a case-sensitive matter. Default: false	<rapid-combobox case-sensitive>
disabled	boolean	Similar to readonly, but with a blur on the component.	<rapid-combobox disabled>
form	string	Associates this component to a form. Form id needs to be passed. If no Id informed, then it will be associated with the ancestor form.	<rapid-combobox form="myForm">
ignore-input-click	boolean	Sets whether to keep the dropdown closed when the input field is clicked. Default: false	<rapid-combobox ignore-input-click>
open	boolean	Defines whether the combolist starts opened or not. Default: false	<rapid-combobox open>
position	"above" | "below"	Places the combolist above or below the combo-box. Default: it will try to fit with the page	<rapid-combobox position="below">
placeholder	string	Sets placeholder text for the element (which disappears when the user starts typing)	<rapid-combobox placeholder="Sample text">
value	string	Sets an initial value for this component	<rapid-combobox value="InitialValue">
scroll-to-selected-when-opening	boolean	Scrolls to selected option when opening	<rapid-combobox scroll-to-selected-when-opening>
scroll-when-selection-changes	boolean	Scrolls when the selection changes	<rapid-combobox scroll-when-selection-changes>

note

autocomplete has the following settings:

• inline: as the user types in the combo-box, the component displays valid options for completing the entry within the combo-box.
• list: as the user types in the combo-box, the component displays and filters the combolist above or below the combo-box.
• both: the component behaves as both inline and list.
• none: the component does not provide autocomplete.

warning

The native behaviour of a combobox component is to accept whatever entry the user inserts, even if it is not one of the options available.

In order to avoid this, implement some protection manually.

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

note

• If you specify a selected or value to more than one option then the component selects only the first in the rapid-option list

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

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

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

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.
control	Used to replace the input element representing the combobox.
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	Type	Description	Example
@change	void	Fires a custom 'change' event when the value has changed.	<rapid-combobox @change="${(x) => x.changeHandler()}">

Events listened to

This component doesn't listen to any events.