Native Select

Installation

pnpm dlx @mielui/svelte add native-select

npx @mielui/svelte add native-select

yarn dlx @mielui/svelte add native-select

bunx @mielui/svelte add native-select

Usage

<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>

Root renders a native select. Bind a string for single selection, or a string array withmultiple . Option values are strings. UseOptGroup with alabel to group options.

AssociateLabel with the select using matchingfor andid values, or providearia-label . Native form attributes and change events pass through. Thesize attribute controls the number of visible rows.

The browser handles validation, keyboard selection, and the mobile picker. Use Select when you need a custom popup.

Multiple selection

Required field