Text fields

Usage

Text fields function similarly to <input> elements, serving as containers with labels to facilitate user input.

Label

<TextField label="Label" value="Value" />
<TextField label="Label" value="Value" variant="outlined" />

Input type

The type attribute of a text field changes how the text field works, such as displaying a different keyboard or providing default validation.

type="text" (default)
type="email"
type="password"
type="url"
type="number"
type="search"
type="tel"
type="textarea"

Password

<TextField label="Email" type="email" variant="outlined" />
<TextField label="Password" type="password" variant="outlined" />

Disabled

Label

<TextField label="Label" disabled value="Value" />
<TextField label="Label" disabled value="Value" variant="outlined" />

Labels

Country

City

<TextField label="Country" variant="outlined" />
<TextField placeholder="email@domain.com" variant="outlined" />
<label id="city-label">
	City
	<TextField variant="outlined" aria-labelledby="city-label" />
</label>

bookmark Nesting text fields in labels without aria-labelledby is not currently supported. If you want to avoid using an id, you can use aria-label instead.

Textarea

Resize

<TextField label="Resize" type="textarea" />
<TextField label="Resize" type="textarea" variant="outlined" />

Icons

Password

Username

error

Username not available

<TextField placeholder="Search" type="search" variant="outlined">
	{#snippet start()}<Icon>search</Icon>{/snippet}
</TextField>
<TextField label="Password" type="password" variant="outlined">
	{#snippet end()}
		<IconButton toggle title="Toggle visibility">
			{#snippet selectedIcon()}
				<Icon>visibility_off</Icon>
			{/snippet}
			<Icon>visibility</Icon>
		</IconButton>
	{/snippet}
</TextField>
<TextField label="Username" variant="outlined" error>
	{#snippet end()}
		<Icon>error</Icon>
	{/snippet}
</TextField>

Prefix and suffix

Amount

$ .00

<TextField
	label="Amount"
	value={0}
	prefixText="$"
	suffixText=".00"
	type="number"
	variant="outlined"
/>

Supporting text

Username

Your username is your unique identifier.

Email*

Email is required

<TextField label="Username" supportingText="Your username is your unique identifier." />
<TextField
	label="Email"
	type="email"
	inputmode="email"
	required
	supportingText="Email is required"
/>

Character counter

Name

0/10

<TextField label="Name" maxlength={10} />

Validation

Constraint validation

<script>
	const reportValidity = (event: Event) => {
		const textField = event.target as HTMLInputElement
		textField.reportValidity()
	}
</script>
<form>
	<TextField label="First name" required onchange={reportValidity} />
	<TextField
		label="Last name"
		required
		pattern="[a-zA-Z]+"
		supportingText="Characters only"
		onchange={reportValidity}
	/>
	<Button>Submit</Button>
</form>

Manual validation

Username

Username is not available

<TextField label="Username" error value="eric20" errorText="Username is not available" />

Theming

Filled text field tokens

Token	Default value
`--np-filled-text-field-container-shape`	`--np-shape-corner-extra-small`
`--np-filled-text-field-container-color`	`--np-color-surface-container-highest`
`--np-filled-text-field-label-text-color`	`--np-color-primary`
`--np-filled-text-field-focus-active-indicator-color`	`--np-color-primary`

Filled text field example

Filled

<TextField
	variant="filled"
	label="Filled"
	--np-filled-text-field-container-shape="0"
	--np-filled-text-field-container-color="var(--np-color-surface-container)"
	--np-filled-text-field-label-text-color="var(--np-color-tertiary)"
	--np-filled-text-field-focus-active-indicator-color="var(--np-color-tertiary)"
/>

Outlined text field tokens

Token	Default value
`--np-outlined-text-field-container-shape`	`--np-shape-corner-extra-small`
`--np-outlined-text-field-label-text-color`	`--np-color-primary`
`--np-outlined-text-field-focus-outline-color`	`--np-color-primary`

Outlined text field example

Outlined

<TextField
	variant="outlined"
	label="Outlined"
	--np-outlined-text-field-container-shape="0"
	--np-outlined-text-field-label-text-color="var(--np-color-tertiary)"
	--np-outlined-text-field-focus-outline-color="var(--np-color-tertiary)"
/>

API

Attributes

Attribute	Type	Default	Description
`type`	`'text' \| 'password' \| 'email' \| 'number' \| 'search' \| 'tel' \| 'url' \| 'textarea'`	`'text'`	Specifies the type of the field.
`variant`	`'outlined' \| 'filled'`	`'filled'`	Visual appearance
`label`	`string \| undefined`	`undefined`	Label of the text field.
`supportingText`	`string`	`''`	Provides additional information below the text field, such as usage guidelines.
`start`	`Snippet \| undefined`	`undefined`	Icon displayed at the beginning of the text field.
`end`	`Snippet \| undefined`	`undefined`	Icon displayed at the end of the text field.
`disabled`	`boolean`	`false`	Disables the text field.
`noAsterisk`	`boolean`	`false`	Disables the asterisk on the floating label when the text field is required.
`error`	`boolean`	`false`	Gets or sets whether or not the text field is in a visually invalid state.
`errorText`	`string`	`''`	The error message that replaces supporting text when `error` is true. If `errorText` is an empty string, then the supporting text will continue to show.
`prefixText`	`string`	`''`	An optional prefix to display before the input value.
`suffixText`	`string`	`''`	An optional suffix to display after the input value.

Bindables

Attribute	Type	Description
`value`	`any`	Value of the input or textarea.
`element`	`HTMLSpanElement`	A reference to the root DOM element of the component. This variable is bound using `bind:this`, allowing direct access to the underlying HTML element for manipulation or querying within the component's logic.
`inputElement`	`HTMLInputElement \| HTMLTextAreaElement \| undefined`	Allows access to the input element