Input

Accessible text input.

The caller associates a <Label for=…> (or wraps it). Supports aria-invalid styling for form validation.

Forms · two-way: bind:value

<script lang="ts">
	import { Input } from '@l4st/driftwood';
</script>

Light	Dark

Props

Prop	Type	Default	What it does
class	string	—	Merged with the component's own classes, last — so yours win.
value bind:	string	—	The field's text.

Everything not listed above is spread onto the underlying element (HTMLInputAttributes): aria-*, data-*, event handlers, and the rest of the native attributes.

Example

The markup behind the screenshot above, lifted from src/routes/shots/ — so it compiles, and it is exactly what produced the image.

<Input placeholder="e.g. nas-01" value="volume1" />
<Input placeholder="Search paths…" />

Forms · Field · FileInput · FileList · Textarea · CodeEditor · Combobox · RadioGroup · NumberInput · InlineEdit · Label · Select · MultiSelect · DatePicker · TagsInput · Checkbox · Switch · Slider

---

← All components · Getting started · Theming · source