Select - Web Component

The Select component can be used imported from:

Playground

Parameters

...

Events

This component has events. Check the documentation about how to use the events.

Name	Payload	Description
change	string	Returns the new value of the "value" attribute
search	string	Returns search value
restarted	void	Emitted on value reset
blur	void	Emitted on blur

Slots

This component has slots. Check the documentation about how to use the slots.

Name	Tags	Description
default	span
option-<opt>	span
label	span
help-text	span

Parameters use

model

Controls the selected value of the input. The value needs to be one of the provided via options:

config

The config parameter is used to set the shape of the input between lined and shaped. Being omitted will render the default line shape.

label

The label parameter is used to set the text label of the component. Make sure you always use it.

Can also use the label slot:

Select

help-text

The help-text parameter is used to provide additional assistance to the user.

name

The name parameter is used to set the name of the component. This is useful when the component is part of a form.

options

The options attribute is an array of objects that represent the chips. Each object inside the array should have the following properties:

• text: The text that will be displayed inside the chip.
• value: The value of the option.
• disabled: A boolean that indicates if the chip is disabled.

We can use <option> tags to define the values of options

Option AOption BOption COption D

The content con the options can be customized using the slots with the pattern options-<option-value>:

Option AOption BOption C

And combining both approaches:

Code

🇪🇸 Spain🇪🇸 Spain🇩🇪 Germany🇩🇪 Germany🇫🇷 France🇫🇷 France🇬🇧 United Kingdom🇬🇧 United Kingdom

INFO

Notice in this last example that the label takes the value from the <option> inner text and not from the slotted content.

Flags

readonly

The readonly parameter is used to set the input in a read-only state. It's commonly used to display information.

disabled

The disabled parameter is used to block the interaction with the component. Not to be confused with readonly.

required

The required parameter is used to set the component as required.

invalid

The invalid parameter is used to set the component as invalid.

with-search

The with-search parameter is used to apply an internal search feature to filter the available options.

You can change the label of the search using search-placeholder.

The input emits a search event that can be used for external filtering.

Methods

reset()

We can all the reset() method of the WebComponent in order to reset the value. This will clean the internal states and emit the nullable value with the change event, plus a restarted event:

In this example, the button triggers the method:

Option AOption BOption C

Value:  undefined

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

HTML Examples

CodeSandbox example