Input

forms

Text input with label, helper text, error state with role=alert, focus ring, disabled state, and all native HTML input attributes. Uses aria-invalid and aria-describedby for accessible error/helper linking.

Import

typescript
import { Input } from "packages/ui/src";

Props

InputProps extends InputHTMLAttributes

PropTypeRequired
labelstringNo
helperstringNo
errorstringNo

Examples

Input

Text input with label, helper text, error state, and focus ring. Supports all native input attributes.

Basic

With Helper Text

Your key is stored locally and never sent to our servers.

Error State

Username must be at least 3 characters
Please enter a valid email address

Disabled

Form Context

Create Project

Lowercase letters, numbers, and hyphens only

Metadata

Component Metadata
Familyforms
FrameworksNext.js, Astro/EmDash
DescriptionText input with label, helper text, error state with role=alert, focus ring, disabled state, and all native HTML input attributes. Uses aria-invalid and aria-describedby for accessible error/helper linking.
PropsInputProps extends InputHTMLAttributes (label?: string, helper?: string, error?: string)
Statesdefault, focused, error, disabled, with-label, with-helper
A11y
  • Label linked via htmlFor/id
  • aria-invalid when error
  • aria-describedby linking to error or helper
  • Error message has role=alert
Responsive
  • Full-width by default
  • Max-width set by parent container
Motion
  • Border color and box-shadow transition on focus
Token Dependencies
  • components.input.background
  • components.input.borderColor
  • components.input.borderRadius
  • components.input.borderWidth
  • components.input.padding
  • components.input.fontSize
  • components.input.textColor
  • components.input.placeholderColor
  • components.input.focusBorderColor
  • components.input.focusRing
  • components.input.errorBorderColor
  • components.input.errorColor
  • components.input.labelColor
  • components.input.labelFontSize
  • components.input.helperColor
  • components.input.helperFontSize
  • components.input.disabledOpacity
Content Slotslabel (string), helper (string), error (string), placeholder (string)
CMS Bindings
  • Field label from CMS schema
  • Validation message from CMS
Test Cases
  • Renders input element
  • Shows label text
  • Shows helper text
  • Shows error message
  • Error has role=alert
  • Has aria-invalid when error
  • Disabled state applied
  • Passes className through