Select Component

[muratcorlu]

Design

Figma Design Document

Implementation

General usage example:

<bl-select label="Select country" required>
  <bl-select-option value="tr" selected>Turkey</bl-select-option>
  <bl-select-option value="nl">The Netherlands</bl-select-option>
</bl-select>

Rules

• Select

API Reference:

bl-select component

Select component is for getting input from users to select one or multiple options from a given list.

Attributes

Attribute	Description	Default Value
label (string)	Label for the input	-
value (string)	Value for the input	-
required (boolean)	Sets select input required	-
disabled (boolean)	Sets select input disabled	-
multiple (boolean)	Allows for multi selection	-

Slots

Name	Description	Default Content
default slot	List of bl-select-option components	-

Events

Event	Description
bl-select	Will be triggered once user make a selection

bl-select-option component

Attributes

Attribute	Description	Default Value
value (string)	Value for the option	-
disabled (boolean)	Sets option disabled	-
selected (boolean)	Sets option selected	-

Slots

Name	Description	Default Content
default slot	Label for the option	-

[koulgar]

Hi, we've faced an issue with previous version where when select boxes has too many options since every options stays in dom it creates a problem with having too many items in dom and causing pages to slow down. Have you considered something like adding intersection observer to options to load when they're actually visible? or is it already discussed and planned?

[muratcorlu]

@koulgar "Virtual scrolling" is a topic we would definitely do an investigation on. But it's a bit extra challenging in web components since we take options as template elements (like native Select input does). So I suggest to consider it after first version. It'll be probably needed also for Data Table component.

[muratcorlu]

Closing regarding to #225