SelectField
A form control that allows users to choose one option from a dropdown list.
Anatomy
The class attribute values represent part names, and conditional indicates elements that are rendered conditionally. Other attributes represent their corresponding props.
<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" {...attributes} bind:value bind:this={element} use:action>
{#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
Type
(value) indicates the default value for the prop.
interface SelectFieldProps {
options: SvelteMap<string, string> | Map<string, string>;
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;
descFirst?: boolean; // (false)
value?: string; // bindable
validations?: SelectFieldValidation[];
attributes?: HTMLSelectAttributes;
action?: Action;
element?: HTMLSelectElement; // bindable
styling?: SVSClass;
variant?: string; // bindable (VARIANT.NEUTRAL)
}Additional Props
options- Sets of display text and their corresponding valuesdescFirst- When true, the bottom element is moved between the top element and the middle elementvalidations- Array of validation functions used to validate input values
Styling
To learn more, see Styling.
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
Exports
Types
type SelectFieldReqdProps = "options";
type SelectFieldBindProps = "value" | "variant" | "element";
type SelectFieldValidation = (value: string, validity: ValidityState) => string | undefined;Others
No additional exports are available.
Examples
The example code uses Tailwind CSS along with SVSClass.