Forms

Input

Single-line text input with bound value, label, description, and error wiring for form-field accessibility.

import { Input } from '@lostgradient/cinder/input';
formfield
01

Overview

Single-line text input with support for labels, addons, validation states, and helper text.

Usage

svelte 
<script lang="ts">
  import Input from '@lostgradient/cinder/input';

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

<Input id="field" bind:value={name} label="Full name" placeholder="Jane Smith" />
{#if name}
  <p style="margin-top: 0.5rem; color: var(--cinder-text-muted);">Hello, {name}!</p>
{/if}
Live preview
02

When to use

Use when
  • Collecting a single line of free-form text such as a name, email, or URL.
  • Composing inside a form-field with leading or trailing adornments.
Avoid when
  • Collecting multi-line prose — use textarea instead.
  • Collecting a numeric value with stepping controls — use number-input instead.
03

Examples

Basic input

Text input with label and bound value.

Compact field with hidden label

Keep the accessible name from label while visually hiding it for compact auth/token layouts.

Newsletter signup

An email-capture section recipe: a form pairs Input with a submit Button inside a raised panel, with heading copy and a consent line.

Sign-in composition

Composition of FormField + Input + Button with a top-of-form Alert auth-error region. Demonstrates the required autocomplete values and the assertive announcement pattern via role="alert".

Input types

Text, email, password, search, date, tel, and url types.

Input with error

Error message wired via aria-invalid and aria-describedby.

04

Props

Props for input
NameTypeDefaultDescription
id required text HTML id for the underlying input, used to associate the <label> and ARIA attributes. Required.
value bindable text '' Bindable current text value of the input.
onValueChangeRequest (next: string) => stringvoid Intercept a proposed value before the bindable value is written. Return a replacement value to transform it.
onValueChange (next: string) => void Notify after the bindable value has been committed.
label text Visible label text rendered above the input and linked via for/id.
labelVisible boolean true Whether the label is visibly rendered. Set false to visually hide it while keeping it programmatically associated.
description text Helper text rendered below the input and associated via aria-describedby.
error text Error message rendered below the input; also sets aria-invalid on the input.
disabled boolean When true, disables the input, matching the native disabled attribute.
required boolean Marks the input as required for form validation, matching the native required attribute.
type 'text''email''password''search''tel''time''url''date'
1 more members 'number'
 'text' Input type controlling the browser's built-in validation and keyboard. Default "text".
inputAttachment Attachment<HTMLInputElement> Attachment for native input access and lifecycle-scoped listeners.
groupClassName text Additional class names applied to the grouped control frame when leading or trailing content is present.
leading snippet
trailing snippet
leadingInteractive boolean false When true, the leading adornment is interactive and included in the accessibility tree. Default false.
trailingInteractive boolean false When true, the trailing adornment is interactive and included in the accessibility tree. Default false.
oninput FormEventHandler<T> | undefined | null