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';
</script>

<Input />
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.

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
Name Type Default Required Bindable Description
id text req HTML id for the underlying input, used to associate the <label> and ARIA attributes. Required.
value text '' bind 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.
hideLabel boolean false Visually hide the rendered label 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''url''date''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 unknown req
trailing unknown req
leadingInteractive unknown false
trailingInteractive unknown false
oninput unknown req