Components Selection

Select

Material Design 3 select web components (lit-material-select, lit-material-select-option).

  • 4.8 KB gzipped
  • @lit-material/select 0.1.0
  • Renders on the server

Example

Install

npm install @lit-material/select @lit-material/tokens
import "@lit-material/select";

Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide

API

<lit-material-select-option>

A single option within a lit-material-select. Not meaningful outside that context.

Properties

PropertyAttributeTypeDefaultDescription
valuevaluestring""
selectedselectedbooleanfalse
disableddisabledbooleanfalse

Slots

SlotDescription
defaultThe option's label.
leadingAn optional leading icon, replaced by a checkmark when selected.

CSS parts

PartDescription
optionThe row (background/padding).
rippleThe state-layer element the hover/press feedback is drawn on.

<lit-material-select>

Material Design 3 select — a button that opens a popup listbox of lit-material-select-option elements, following the WAI-ARIA "select-only combobox" pattern (https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/).

Properties

PropertyAttributeTypeDefaultDescription
variantvariantSelectVariant"filled"
labellabelstring""
valuevaluestring""
namenamestring""
requiredrequiredbooleanfalse
disableddisabledbooleanfalse
errorerrorbooleanfalse
errorTexterror-textstring""
supportingTextsupporting-textstring""
openopenbooleanfalse
formformstring | undefinednone

Events

EventDescription
changeFires when the selected value changes via user interaction.

Slots

SlotDescription
defaultlit-material-select-option elements.

CSS parts

PartDescription
triggerThe button that shows the current value and opens the listbox.
labelThe floating label element.
listboxThe popup listbox surface.
supportingThe supporting-text row.

CSS custom properties

PropertyDescription
--lit-material-select-min-widthSmallest width (default 210px).
--lit-material-select-shapeCorner radius (default --md-sys-shape-corner-extra-small; filled rounds the top only).
--lit-material-select-shape-startStart-side corners; lit-material-input-group squares inner ones.
--lit-material-select-shape-endEnd-side corners.

Source on GitHub npm