mielui
Native controls

Native Select

A select field that uses your browser and operating system's option picker.

Installation

pnpm dlx @mielui/svelte add native-select

Usage

Root renders a native <select>. Bind a string for single selection, or a string array when multiple is set. Option values are strings; group options with OptGroup and its label.

Name the select with a Label whose for matches its id, or with aria-label. Native form attributes and change events pass through, and size sets the number of visible rows. The browser handles validation, keyboard selection, and the mobile picker; use Select when you need a custom popup.

<script lang="ts">
    import * as NativeSelect from '@mielui/svelte/components/native-select';

    let timezone = $state('Europe/Paris');
</script>

<NativeSelect.Root name="timezone" bind:value={timezone} aria-label="Time zone">
    <NativeSelect.Option value="Europe/Paris">Paris</NativeSelect.Option>
    <NativeSelect.Option value="Europe/London">London</NativeSelect.Option>
</NativeSelect.Root>

Examples

Multiple selection

Required field

API reference

NativeSelect.Root

  • multiple
    false | true

    Allows several options to be selected and makes value an array.

    Default false

  • value Bindable
    string | string[]

    Selected value, or an array when multiple is set. Bindable.

NativeSelect.Option

  • value
    string

    Value submitted when this option is selected.

Other parts

These parts have no props of their own. They pass HTML attributes and events to their element.

  • NativeSelect.OptGroup