ABBA UIv0.1.0
Forms

Input

A single-line text field.

Client component1 export

Renders a real `<input>`, so form association, validation, autofill and IME behaviour come from the platform. Uncontrolled by default — pass `value` with `onChange` to control it.

Import

import { Input } from "@abbainitiative/ui";

Also available from the subpath entry @abbainitiative/ui/input.

This component carries its own "use client" directive. You can still render it from a Server Component — you simply cannot pass it a function prop, because functions do not serialise across the boundary.

Examples

Sizes and affixes

<Stack gap={3}>
  <Input aria-label="Small" size="sm" placeholder="Small" />
  <Input aria-label="Medium" placeholder="Medium" />
  <Input aria-label="Amount" prefix="₱" suffix=".00" placeholder="0" />
</Stack>

Invalid state

<Input aria-label="Email" invalid defaultValue="not-an-email" />

Props

Input props. All native attributes of the underlying element are also accepted and forwarded.
PropTypeDefaultDescription
size"sm" | "md" | "lg""md"Control height. Renamed from the native size attribute, which counts characters.
invalidbooleanfalseMarks the field as failing validation.
prefixReactNodeDecorative content inside the leading edge.
suffixReactNodeDecorative content inside the trailing edge.

Accessibility

  • The invalid state sets `aria-invalid`, so it is heard and not merely seen as a red border.
  • Affixes are `aria-hidden`; they are decoration, not part of the field's name.
  • Pair with FormField, or supply `aria-label`, so the field is never unnamed.