Skip to content
Components / Controls

Input

A single-line text field for names, identifiers and short values.

@fabrials/ui
Loading state

Installation

  1. Import the control from @fabrials/ui, after setting the app up.

    TypeScript
    import { Input } from "@fabrials/ui";
  2. Or install it under shadcn's name, so code that imports @/components/ui/input gets this control. See shims.

    npx shadcn@latest add @fabrials/input

API reference

Prop / exportTypeDescription
aria-label / labelstringPair it with Label or Field. Placeholder text is not the name.
disabledbooleanKeeps the value readable.

Behavior

Validation belongs to the host. Field connects the label, hint and error.

Accessibility

Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.