` 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](/docs/styling).
To make the placeholder look distinct, target the auto-injected empty option by its empty value:
```css
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` ``): `role="group"` and `aria-labelledby` pointing to the label part when label text is present.
- Select (`main` ``): `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 ``, 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](/docs/concepts) for the library's approach.
## Exports
### Types
```ts
type SelectFieldValidation = SVSFieldValidation;
interface SelectFieldProps extends Omit {
options: SvelteMap | Map;
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;
element?: HTMLSelectElement; // bindable
styling?: SVSClass;
variant?: SVSVariant; // bindable (VARIANT.NEUTRAL)
// class & other HTMLSelectAttributes are passed to 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
**Code**
```svelte src=SelectFieldBasic.svelte
{#snippet right()}
```