Input ported
A single line field with clear labels and useful states.
A single line field with clear labels and useful states.
Loading demo…
Guidance
When to use
- Any single-line text value in a form, such as name, email, or URL.
- Fields whose helper or error copy changes as the person types, where the message should reword in place.
- Plain form posts, since it forwards name and every native input attribute.
When not to use
- Use textarea for multi-line text.
- Use password-field, search-field, or number-field when the value has that shape.
- Use inline-edit for a value shown as page text and edited in place.
pnpm dlx shadcn-svelte@latest add @arcui/inputUsage
<script lang="ts">
import { Input } from '$lib/components/input';
let email = $state('');
</script>
<Input label="Work email" type="email" bind:value={email} description="We only use this for sign-in." />Variants & Examples
Default
Standard appearance and configuration.
<Input />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | – | (Required) Visible label, tied to the input with htmlFor. |
description | string | – | Helper copy under the field, linked through aria-describedby. |
error | string | – | Error copy. Sets aria-invalid and renders in a role=\"alert\" row. |
...props | InputHTMLAttributes<HTMLInputElement> | – | Forwarded to the native input, including ref, type, value, onChange, and name. |
Keyboard Interactions
| Key | Action |
|---|---|
Tab | Moves focus to the interactive element. |
Accessibility
- Renders a native input with a real label, so focus and form behavior are native.
- Description and error ids are merged into aria-describedby alongside any caller value.
- Errors set aria-invalid and announce through role="alert"; animated words are aria-hidden with a plain screen reader copy.
Motion
- Helper and error rows open their height on a smooth spring, then changed words rise in and unblur while numbers roll digit by digit. - Reduced motion mounts rows at full height and swaps words with an instant fade.
Notes for AI
- Default single-line text field. Use password-field, search-field, or number-field when the value has that shape.
- Works controlled or uncontrolled like a native input; pass name for plain form submission.
- Changing the error string rewords it in place, so derive it from state instead of toggling separate messages.
Source of truth: registry/components/input/input.tsx