Input

Example

<label for="input-email">Email</label>
<input id="input-email" type="email" name="email" autocomplete="email"
	placeholder="name@example.com" required data-slean="input" />

<label for="input-password">Password</label>
<input id="input-password" type="password" name="password"
	autocomplete="current-password" data-slean="input" />

<label for="input-notes">Notes</label>
<textarea id="input-notes" name="notes" data-slean="input"></textarea>

<script lang="ts">
	// Nothing to import: the browser owns the field. The stylesheet is optional.
	import '@svelte-lean/styles/input.css';

	let email = $state('');
	let notes = $state('');
</script>

<label for="input-email">Email</label>
<input id="input-email" type="email" name="email" autocomplete="email"
	placeholder="name@example.com" required bind:value={email} data-slean="input" />

<label for="input-password">Password</label>
<input id="input-password" type="password" name="password"
	autocomplete="current-password" data-slean="input" />

<label for="input-notes">Notes</label>
<textarea id="input-notes" name="notes" bind:value={notes} data-slean="input"></textarea>

Why this implementation exists

A text field is the control every form has, and the platform implements all of it: editing and selection in every script, autofill and password managers keyed by autocomplete, the on-screen keyboard chosen by type, constraint validation on submit and :user-invalid after an edit. A component that wraps <input> to provide these adds code the element does not need.

Svelte Lean ships the element as it is, in three sizes, with the states the platform reports (:read-only, :disabled, :user-invalid, ::placeholder) and aria-invalid for an error the application found. The textarea grows with its content through field-sizing: content where the browser supports it.

Usage

The markup needs no package. Install @svelte-lean/styles for the stylesheet; @svelte-lean/primitives adds the typed contract and nothing at runtime.

npm install @svelte-lean/styles

pnpm add @svelte-lean/styles

yarn add @svelte-lean/styles

bun add @svelte-lean/styles

import '@svelte-lean/styles/input.css';

Put data-slean="input" on an <input> of type text, email, password, search, url or tel, or on a <textarea>. Give it a label and the autocomplete token that matches the value.

data-size="sm" or data-size="lg" changes the height and padding. Bind the value with bind:value; it is always a string.

For a description and an error message under the input, put it in a Field. Other input types have their own primitives: Number field, Date field, Color field, File field, Slider.

Anatomy

Runtime profile

Tier 0: the input has no behavior module, the Vite plugin maps input to no module, and the native-only fixture proves the path ships no Svelte Lean JavaScript.

Accessibility contract

• A visible label through <label for>. A placeholder is a hint about the format, not a label: it disappears when the user types.
• autocomplete tokens let the browser and password managers fill the field; type chooses the on-screen keyboard.
• The browser exposes required and constraint failures itself. An error the application found is aria-invalid="true" on the input and a message listed in aria-describedby.
• :user-invalid colors a field only after the user edited it, so an untouched required field is not red.
• Under a coarse pointer the text takes the base size, which keeps iOS Safari from zooming the page when a field takes focus.

Keyboard

Platform features

Without JavaScript

Fully functional, including validation on submit and the invalid border after an edit.

Server rendering

The value attribute, or the textarea’s text, renders the initial value; required, pattern and aria-invalid render as attributes.

Before hydration

Nothing is attached; the field works before and after hydration alike.

Styling

input.css sets the height from the control-height tokens, the border, background and text colors, the muted background of :read-only, the danger border of :user-invalid and aria-invalid, half opacity for :disabled, and a three-line minimum for the textarea (in lh, so it follows the line height). The tokens it reads:

State selectors the stylesheet targets, all from the platform or ARIA: ::placeholder, :disabled, :focus-visible, :hover, :user-invalid, [aria-invalid="true"].

Variant attributes: data-size (sm, lg); data-status (warning, error).

Compatibility notes

Text-like inputs and the textarea are widely available; :user-invalid is Baseline 2023. field-sizing is newly available since June 2026 (Chrome 123, Safari 26.2, Firefox 152): where it is missing, the textarea keeps the height of its rows, three lines at least, and scrolls.

Examples

Sizes

data-size="sm" and data-size="lg" change the height, the inline padding and, for the large size, the text; without the attribute the size is medium. Under a coarse pointer the medium size takes the large height.

<input data-slean="input" data-size="sm" value="Small" aria-label="Small" />
<input data-slean="input" value="Medium" aria-label="Medium" />
<input data-slean="input" data-size="lg" value="Large" aria-label="Large" />

States

Every state is the platform’s or an ARIA attribute: readonly keeps the value focusable and submitted, disabled removes it from the tab order and the form data, and aria-invalid="true" marks an error the application found. The error text is the application’s; the Field page shows where it goes.

<div data-slean="field">
	<label for="input-plan" data-slean-part="label">Plan</label>
	<input id="input-plan" value="Team" readonly data-slean="input" />
</div>
<div data-slean="field">
	<label for="input-seats" data-slean-part="label">Seats</label>
	<input id="input-seats" value="12" disabled data-slean="input" />
</div>
<div data-slean="field">
	<label for="input-handle" data-slean-part="label">Handle</label>
	<input id="input-handle" value="ada lovelace" aria-invalid="true"
		aria-describedby="input-handle-error" data-slean="input" />
	<p id="input-handle-error" data-slean-part="error">Use letters, digits and hyphens only.</p>
</div>

Testing

• apps/playground/tests/primitives/forms.spec.ts Playwright: keyboard, form values, :user-invalid, names and descriptions, axe
• packages/styles/tests static checks of the stylesheet (layers, tokens, specificity, dark parity)
• fixtures/native-only consumer build asserting that no behavior runtime ships (invariant A)

Source

• packages/primitives/src/input/contract.md the contract in prose: semantics, keyboard, focus, ARIA, SSR, JS-disabled behavior
• packages/primitives/src/input/contract.ts typed constants: name, tier, base, parts, options, events
• packages/styles/css/input.css the optional stylesheet