amezquita design systemGet started

Primitives

Input

Labelled single-line text entry with hint and error states

Markdown version for agents

Import
import { Input } from '@amezquita/design-system/components/primitives/Input'

Live render

We’ll only use it for release notes.

    Props

    PropTypeDescription
    type?'text' | 'email' | 'password' | 'url' | 'search' | 'tel'
    label?string
    value?string
    defaultValue?string
    onChange?(value: string) => void
    onClear?() => void
    error?string
    hint?string
    prefix?React.ReactNode
    suffix?React.ReactNode
    clearable?boolean
    search?boolean
    searchLabel?string

    Also accepts all props of: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'defaultValue' | 'prefix' | 'type' | 'children'>

    Usage example

    tsx
    <Input
  id="default"
  label="Email address"
  placeholder="you@example.com"
  type="email"
/>

    Accessibility

    • <label> is auto-linked via useId() — never use placeholder as the only label
    • When no label prop: aria-label must be passed instead
    • aria-invalid="true" set automatically when error prop is present
    • aria-describedby links the input to the hint/error element by id
    • Focus: outline uses --input-border-focus (maps to --color-border-focus); error state uses --input-border-error instead
    • 'use client' — uses useId(), cannot render as a server component