Forms

NativeSelect

One choice from a list, as the platform's own select in a field: the phone's picker, the browser's keyboard behaviour and form submission come for free.

Usage

Give the choices as options and bind the value, which keeps the type of the option values, so numbers stay numbers. With placeholder, the select starts on a first option that stands for no choice, and the value is null until the user picks one.

Country

Where the account is held

Repeat

Bound values: country = null, days = 30

Account.svelte

<script>
  import { NativeSelect } from 'sveltier';
  let country = $state(null);
</script>

<NativeSelect
  label="Country"
  name="country"
  placeholder="Choose a country"
  required
  options={[
    { value: 'gb', label: 'United Kingdom' },
    { value: 'jp', label: 'Japan' },
    { value: 'vn', label: 'Vietnam' }
  ]}
  bind:value={country}
/>

Validation

required makes a choice necessary: once the user has picked something, the placeholder cannot be chosen again. rules, error and validateOn work as on a TextField, and a form reset goes back to the option the select started with.

When to use it

For a short, fixed list whose labels are plain text, the native select is the lightest and most familiar control, and on phones it opens the system picker. For search, custom rows or many choices, a select of its own is coming with the next components. For a few options side by side, a SegmentedControl shows them all at once.

Accessibility

It is a <select>: the label, hint and error are linked as on every field, and the keyboard works as the platform defines it.
The arrow is drawn over the end of the box and lets presses through to the select.

API

Name	Type	Default	Description
`variant`	`'outlined' \| 'tonal' \| 'elevated' \| 'text' \| 'plain'`	`'outlined'`	How the box is drawn.
`color`	`Color`	`'primary'`	The accent of the focused field. An invalid field uses `error`.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Height and text size, matching a Button of the same size.
`density`	`'compact' \| 'default' \| 'comfortable'`	`'default'`	Multiplies the height and padding, never the text.
`rounded`	`boolean \| 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	`true`	Corner rounding. `true` keeps the theme's radius.
`disabled`	`boolean`	`false`	Mutes the field and disables its control.
`error`	`FieldError`	`–`	An error from outside the field, such as the server's answer: a message, a list of which the first is shown, or `true` for an invalid state described elsewhere.
`prepend`	`Snippet`	`–`	Content at the start of the box, usually an icon.
`label`	`string`	`–`	The visible label, linked to the control. Without it, name the control with `aria-label`.
`hint`	`string`	`–`	Help under the field. An error replaces it.
`options`	`readonly NativeSelectOption<T>[]`	`–`	The choices, in order.
`value`	`T \| null`	`–`	The chosen value, or `null` for none. Bindable.
`placeholder`	`string`	`–`	A first option that stands for no choice, such as "Choose a country".
`rules`	`readonly Rule<T>[]`	`–`	Checks run in order after `required`, with the chosen value. The first message is shown.
`validateOn`	`'blur' \| 'input' \| 'submit'`	`–`	When the message shows. Defaults to the form's setting, else `'blur'`.
`required`	`boolean`	`false`	A choice must be made. Adds an asterisk to the label, and the placeholder cannot be chosen again once the user has picked something.
`style`	`string \| null`	`–`	Inline style of the field's root element.
`class`	`ClassValue \| null`	`–`	Classes added after the component's own: a string, an array or an object.
`ref`	`HTMLSelectElement \| null`	`–`	The root element, bindable with `bind:ref`.