Input

A text entry field.

<script lang="ts">
  import { Input } from '@shardsui/svelte/input'
</script>

<label class="flex flex-col items-start gap-1 text-sm font-semibold text-gray-900">
  Title
  <Input
    placeholder="e.g. Design Systems"
    class="h-8 w-64 rounded-md border border-gray-200 px-2 text-sm font-normal text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-gray-950 any-pointer-coarse:text-base"
  />
</label>

Anatomy

<script>
  import { Input } from '@shardsui/svelte/input'
</script>

<Input />

Usage guidelines

• Form controls must have an accessible name: give the input a <label> element, or wrap it in the Field parts. See the forms guide.
• Input is Field.Control under a shorter import: inside a <Field.Root> it picks up the label association, validation state and error bindings documented in Field. Outside one it is a plain <input>.

API reference

Other standard <input> props (type, required, pattern, placeholder, etc.) pass through, as do <textarea> props (rows, cols, wrap) when as="textarea".

Outside a <Field.Root> only data-disabled and a forwarded aria-describedby are emitted.