<sl-select>

Selects allow you to choose items from a menu of predefined options.

The source repository is archived and read-only.

Superseded by <wa-select> in Web Awesome.

Category

Forms

Built with

Lit

Library

Shoelace

Author

Shoelace

Package

@shoelace-style/shoelace

Component size

25.3 kB JS (minified + gzipped, JS includes dependencies beyond the library)

Library size

7.9 kB JS (shared by every Shoelace component, loaded once per page)

Downloads

142,636/week · jsDelivr 2,182,806,504 hits/month (whole @shoelace-style/shoelace package)

GitHub stars

13,834

Latest stable version

2.20.1

Last published

Mar 11, 2025

Component last changed

Dec 2, 2024 (in 2.19.0)

License

MIT

Status

stable

• Documentation
• Source code

• Documentation
• Source code

Attributes

• name
• value
• size
• placeholder
• multiple
• max-options-visible
• disabled
• clearable
• open
• hoist
• filled
• pill
• label
• placement
• help-text
• form
• required
• getTag

Slots

• label
• prefix
• suffix
• clear-icon
• expand-icon
• help-text

Events

• sl-change
• sl-clear
• sl-input
• sl-focus
• sl-blur
• sl-show
• sl-after-show
• sl-hide
• sl-after-hide
• sl-invalid

CSS Parts

• form-control
• form-control-label
• form-control-input
• form-control-help-text
• combobox
• prefix
• suffix
• display-input
• listbox
• tags
• tag
• tag__base
• tag__content
• tag__remove-button
• tag__remove-button__base
• clear-button
• expand-icon