Primitive

Input

Single-line field with label, help, leading icon, disabled, and error states.

Input is the canonical single-line text field. Compose Field around it for richer form chrome.
form
DOM renderImage render
InputDefault
Used for review notifications.

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

Every state maps to the same primitive render route through the state query param.

Default

Dense field states with label, icon, and help text.
Used for review notifications.
Render state

Filled

Value present.
Render state

Error

Validation failure.
Enter a valid email address.
Use at least 3 characters.
Render state

Disabled

Locked field.
Render state

InlineControl

Bare form-control anatomy for component-owned field layouts.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
labelReactNode-Optional field label.
helpReactNode-Muted helper text.
errorReactNode-Error copy and invalid treatment.
leadingIconIconName | ReactElement-Glyph inside the left field slot.
placeholderstring-Native placeholder text.
disabledboolean-Native disabled behavior.