Skip to main content
MACAW

Input

Atombeta@macaw-ds/ui · since 0.1.0

Single-line text entry: names, emails, references, amounts. Not for multi-line text, dates or selections.

Open gallery

The text field primitive. Labelled by contract (TypeScript requires an id for a visible label, or aria-label / aria-labelledby), with adornments for currency symbols and units, an `invalid` state wired to aria-invalid, and `align="end"` for money. Formatting of money and numbers belongs to the consumer until the NumberField ships.

Playground

Controls are generated from the manifest; the snippet is what the CLI prints. Show focus and Reduced motion appear only when they apply.

Frame theme

What moves: Border colour eases on hover. Hover transitions are 100 ms, so the difference is subtle by design.

Examples
import { Input } from '@macaw-ds/ui';

<Input />

Controls

HTML input type. number is unformatted; for currency, format in the consumer and keep type="text" with inputMode="decimal".

size

28, 32 or 40 px tall, matching Button sizes so they line up in a row.

align

end switches on tabular numerals and right-aligns. Use for amounts.

Shows the critical border and sets aria-invalid. Always pair with a visible message linked via aria-describedby.

Not editable and not focusable.

Readable and focusable, not editable. Sunken background.

Example value, not a label. Meets 4.5:1 but disappears on typing.

Examples

The named exports of the examples file, rendered as they ship.

  • Default
  • Amount

    Charged on the 1st of each month.

  • Invalid

    Enter a full email address, like finance@acme.com.

  • Search
  • Sizes
  • States