@smui/select

Svelte Material UI - Select

Select menus provide the user with a choice between multiple items.

Installation

npm install --save-dev @smui/select

Demo

See it in action.

See the demo code.

Whoa There, These Docs are Outdated

The latest SMUI v3 beta had a lot of changes, and these docs haven't been caught up yet. You should check out the demo page's code to see the latest usage.

Basic Usage

<Select
  bind:value={fruitChoice}
  label="Fruit"
  anchor$class="select-width"
  menu$class="select-width"
>
  <Option value="" />
  {#each fruits as fruit}
    <Option value={fruit}>{fruit}</Option>
  {/each}
</Select>

<script>
  import Select, { Option } from '@smui/select';

  let fruits = ['Apple', 'Orange', 'Banana', 'Mango'];
  let fruitChoice = '';
</script>

<style>
  * :global(.select-width) {
    min-width: 200px;
  }
</style>

Exports

todo...

More Information

See Dropdown menu in the Material design spec.

See Select in MDC-Web for information about the upstream library's architecture.

Changelog

3.0.0-beta.9 (2021-04-16)

Bug Fixes

• focus indicator on keyboard focus checkbox and switch (219d146)
• menu surface anchor adds classes with default function (27f5a16)
• non-interactive chip text color (e673c93)
• primary action span missing from chips (17758af)
• remove more event forwarding declarations (17165ce)
• remove Slider highlight color on tap in Chrome (3ccb603), closes #219
• use passive listener on tooltip window scroll (377de62)

Features

• add nonInteractive chip set feature and fix chip tabindex management (c1f223f)
• new Tooltip component (6293aef)