Preview

Installation

npx sigma-ui@latest add native-select

Usage

<script setup lang="ts">
import { NativeSelect, NativeSelectOption } from '@/components/ui/native-select';

const fruit = ref('');
</script>

<template>
  <NativeSelect v-model="fruit" aria-label="Fruit">
    <NativeSelectOption value="apple">Apple</NativeSelectOption>
    <NativeSelectOption value="banana">Banana</NativeSelectOption>
  </NativeSelect>
</template>

NativeSelect binds with v-model. Group options with NativeSelectOptGroup. Native attributes such as disabled and multiple pass through to the <select>.

Examples

Groups

API Reference

NativeSelect

Props

Prop	Type	Default
modelValue	AcceptableValue | AcceptableValue[]	""

Events

Event	Payload
update:modelValue	[value: AcceptableValue | AcceptableValue[]]

Slots

Slot	Scope
default NativeSelectOption and NativeSelectOptGroup children.	-

NativeSelectOptGroup

Slots

Slot	Scope
default NativeSelectOption children of this group.	-

NativeSelectOption

Slots

Slot	Scope
default Label of the option.	-

Accessibility

This is a native <select>, so the browser provides the listbox behavior and keyboard support. Give it a <label> or aria-label.

Key	Description
Tab	Moves focus to the select.
Space or Enter	Opens the option list.
ArrowUp or ArrowDown	Moves between options.
Esc	Closes the list.