SelectField

A form control that allows users to choose one option from a dropdown list.

Select Field

Select your option

Usage

Use standalone.

Svelte

<SelectField {...props} />

Anatomy

The class attribute values represent part names, and conditional indicates elements that are rendered conditionally. Other attributes represent their corresponding props.

An empty <option value=""> is auto-injected at the top when options has no "" key and (placeholder is set OR value === "").

Svelte

<div class="whole">
  <div class="top" conditional>
    <label class="label" conditional>
      {label}
      <span class="extra" conditional>{extra}</span>
    </label>
    <span class="aux" conditional>{aux}</span>
  </div>
  <div class="middle">
    <span class="left" conditional>{left}</span>
    <select class="main" {...rest}>
      <option value="" conditional>{placeholder}</option>
      {#each options as { option, text }}
        <option value={option}>{text}</option>
      {/each}
    </select>
    <span class="right" conditional>{right}</span>
  </div>
  <div class="bottom" conditional>{bottom}</div>
</div>

Props

Name	Type	Default	Description
`options*`	`SvelteMap`	-	Display text and corresponding values
`placeholder`	`string`	-	Text of the empty option auto-injected at the top of the list
`label`	`string`	-	Field label
`extra`	`string`	-	Extra text shown with the label
`aux`	`Snippet`	-	Auxiliary content; receives value, variant, and select element
`left`	`Snippet`	-	Content before the select; receives value, variant, and select element
`right`	`Snippet`	-	Content after the select; receives value, variant, and select element
`bottom`	`string`	-	Bottom message
`reserve`	`boolean`	`false`	Renders the bottom element even without a message to prevent layout shift
`value`	`string`	-	Bindable selected value
`validations`	`SelectFieldValidation`	-	Validation functions for input values
`attach`	`Attachment`	-	Svelte attachment on the select
`element`	`HTMLSelectElement`	-	Bindable select element
`styling`	`SVSClass`	-	Styling override
`variant`	`SVSVariant`	`NEUTRAL`	Bindable variant

* required. Other HTMLSelectAttributes are passed to <select> via rest props; class is merged onto the root.

SelectField is single-select only; multiple is intentionally not supported.

Styling

To learn more, see Styling.

To make the placeholder look distinct, target the auto-injected empty option by its empty value:

Stylesheet

option[value=""] {
  color: gray;
}

Variant Management

In the initial state or when there is no input value, neutral is applied. After a value is entered, if the value validation succeeds, it switches to active; if it fails, it switches to inactive. When validating the form, inactive is applied when validation fails. If the variant prop is specified, the specified value is applied instead of neutral.

Default Class Name

svs-select-field

Accessibility

ARIA Roles and Attributes

The component applies these automatically:

Field (whole <div>): role="group" and aria-labelledby pointing to the label part when label text is present.
Select (main <select>): aria-describedby, aria-invalid, and aria-errormessage from the validation message wiring.
Message (bottom): role="alert" when the field is inactive and showing an error message.

Provide label text for the field's accessible name; the component wires that label to the group and control instead of requiring an author-passed aria-label.

Standards Basis

SelectField is built on a native <select>, so keyboard and assistive-technology support follows the browser standard for select controls, including typeahead and arrow-key navigation. See the Concepts standards-first guidance for the library's approach.

Exports

Types

TypeScript

type SelectFieldValidation = SVSFieldValidation<string, HTMLSelectElement>;
interface SelectFieldProps extends Omit<HTMLSelectAttributes, "value" | "multiple"> {
  options: SvelteMap<string, string> | Map<string, string>;
  placeholder?: string; // text of the auto-injected empty option
  label?: string;
  extra?: string;
  aux?: Snippet<[string, string, HTMLSelectElement | undefined]>; // Snippet<[value,variant,element]>
  left?: Snippet<[string, string, HTMLSelectElement | undefined]>; // Snippet<[value,variant,element]>
  right?: Snippet<[string, string, HTMLSelectElement | undefined]>; // Snippet<[value,variant,element]>
  bottom?: string;
  reserve?: boolean; // (false)
  value?: string; // bindable
  validations?: SelectFieldValidation[];
  attach?: Attachment<HTMLSelectElement>;
  element?: HTMLSelectElement; // bindable
  styling?: SVSClass;
  variant?: SVSVariant; // bindable (VARIANT.NEUTRAL)
  // class & other HTMLSelectAttributes are passed to <select> via ...rest (class is merged onto the control)
  // single-select only; multiple is intentionally unsupported
}
type SelectFieldReqdProps = "options";
type SelectFieldBindProps = "value" | "variant" | "element";

Others

No additional exports are available.

Examples

The example code uses Tailwind CSS along with SVSClass.

Basic

Select Field

Select your option

With Interactive Variant

Preset for Demo

Free Input

Enter variant as you like

Favorite Fruit (optional)

Select your favorite