Input

Forms · src/components/Input/Input.tsx

One line of text, with its label, hint and error.

For a person's name, an address, a phone number, a date or an amount, reach for the components in the Borders group instead: each of those decides something about who can fill it in, and a bare text field quietly decides it wrong.

The id is generated once and kept, so the label keeps pointing at the same control across re-renders. Pass id only when something outside needs to reference the field.

Import

import { Input } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
size	'sm' | 'md' | 'lg'
invalid	boolean	Marks the control invalid without printing a message. error implies it.

Also accepts everything on FieldShellProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'className' | 'style' | 'id'>.