Text inputs
Input and Textarea — the two plain text controls, and the one attribute that styles both.
Two controls, one rule between them: aria-invalid drives the styling. There is no invalid
prop on either, so the same attribute that tells assistive tech the field is wrong is the one that
paints it — they cannot disagree. Inside a Field it is set for you.
An input with an adornment glued to its edge — a prefix, a unit, an inline button — is
InputGroup, which is the same chrome with room in it.
Input
import { Input } from "@kanzo-tech/ui";A single-line text field. type="number" with inputMode="decimal" is the whole of "a numeric
field"; reach for NumberInput when the value wants steppers, arrow
keys and drag-to-scrub instead.
Invalid
Disabled
Textarea
import { Textarea } from "@kanzo-tech/ui";The height is field-sizing-content, so the box grows as the user types instead of scrolling
inside a fixed four-row window.
With field
An archivist reads this before anyone signs it.
Invalid
Disabled
API Reference
Two controls, so two tables.
Input
| Prop | Type | Default |
|---|---|---|
size | "sm" | "md" | "lg" | "md" |
type | React.HTMLInputTypeAttribute | "text" |
Extends React.ComponentProps<typeof FieldInput> with the native size attribute omitted, so
ref, placeholder, disabled, aria-invalid and every other input prop pass through. size
is mirrored to data-size, and the three heights match Button's sm / md / lg.
inputVariants is exported for putting the same field on another element — ClipboardInput is
built from it.
Textarea
No props of its own — and deliberately no size, unlike Input above: the height is
field-sizing-content over a min-h-16 floor, so the content sizes the box.
Extends React.ComponentProps<typeof ArkField.Textarea>, so ref, value / defaultValue,
onChange, rows, placeholder, disabled and aria-invalid pass through. Inside a Field
it also picks up data-invalid from the machine, which paints the same way aria-invalid does.
TextareaProps is exported, so a wrapper can take the same props without restating them.