Input
A single-line text field, in the two densities the app uses.
A single-line text field. Always pair it with a Label — a placeholder is not a label, because it disappears the moment someone starts typing, which is exactly when they need it.
Default
Slots
leftIcon puts an icon inside the shell; rightSlot takes any node and is where units and suffixes go. Both sit inside the border, so the field stays one rectangle.
px
Bare mode
mode="bare"drops the border and background so the input can sit inside a shell that already provides them — a table cell, a layer row, a composed field. It is not a “quiet” style for standalone use.
States
Props
Input
| Prop | Type | Default | Description |
|---|---|---|---|
leftIcon | ReactNode | — | Icon rendered inside the field, before the text. |
rightSlot | ReactNode | — | Trailing content inside the field — a unit, a suffix, a small action. |
mode | "shell" | "bare" | "shell" | `bare` removes the border and fill for use inside a surface that has them. |
wrapperClassName | string | — | Classes for the shell element rather than the `input` itself. |