Select

A drop down list component.

Basic

Allow None

By default the the select component will automatically select the first option if the value is left undefined. To opt out of this behavior set `allowNone`.

Disabled / Readonly

Disabled Option

Width

Without Icon

Custom Icon

Add a custom icon by adding your icon to the `icon` slot. You can also disable the icon rotation by setting `iconRotation` to false.

HTML Content

You can display the HTML content from your options such as icons. To enable this specify `allowXSS`.

NOTE: When enabling allowXSS make sure to sanitize user input to prevent XSS attacks .

Dividers / Headers

You can put any valid HTML inside of the select component.

Multiple Selects

Using multiple selects that are dependent on each other is much easier thanks to the mutation observer on the select component. This updates the value to make sure it is contained in the new options when the options change.

NOTE: Make sure to key your each blocks otherwise the mutation observer may not catch the change.

Scrollable

Larger lists will scroll automatically by default at `240px` you can adjust this by setting the `maxHeight` attribute.

Multi-Select

Allow multiple selections using the `multiSelect` attribute.

Selected Overflow

Many UI libraries choose to overflow selections vertically thats not always the best for layout shift and also for style. Instead the selections will overflow horizontally and you can scroll through them using `shift + scroll` or other scroll methods.

Disabled Multi-Select

Believe it or not, not everyone thinks of this but in our select the clear option is not enabled when the select is disabled. Scrolling is still enabled though.

Change Options

When you change the options the select will react to the change.

Change Value

When you change the value the select will react to the change.