TextField
A form control for single-line or multi-line text input.
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>
{#if type === "area"}
<textarea class={"main"} {...attributes} bind:value bind:this={element} use:action></textarea>
{:else}
<input class={"main"} {type} {...attributes} bind:value bind:this={element} use:action />
<datalist conditional>
{#each options as option}
<option value={option}></option>
{/each}
</datalist>
{/if}
<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 TextFieldProps {
label?: string;
extra?: string;
aux?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[value,variant,element]>
left?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[value,variant,element]>
right?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[value,variant,element]>
bottom?: string;
descFirst?: boolean; // (false)
value?: string; // bindable
type?: "text" | "area" | "email" | "password" | "search" | "tel" | "url"; // bindable ("text")
options?: SvelteSet<string> | Set<string>;
validations?: TextFieldValidation[];
attributes?: HTMLInputAttributes | HTMLTextareaAttributes;
action?: Action;
element?: HTMLInputElement | HTMLTextAreaElement; // bindable
styling?: SVSClass;
variant?: string; // bindable (VARIANT.NEUTRAL)
}Additional Props
descFirst- 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, the variant switches to active if validation succeeds, or to inactive if validation fails. 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-text-field
Exports
Types
type TextFieldValidation = (value: string, validity: ValidityState) => string | undefined;
type TextFieldReqdProps = never;
type TextFieldBindProps = "value" | "type" | "variant" | "element";Others
No additional exports are available.
Examples
The example code uses Tailwind CSS along with SVSClass.