input field
InputField wraps a native HTML input in the shared DS single-line container — cream surface, dark ink border, offset shadow, and 2px radius — and adds an optional label above and an optional leading icon slot inside the bar. It is a controlled or uncontrolled primitive that forwards all standard input attributes to the underlying element.
| field | value |
|---|---|
| group | global |
| import | @arieare/ds |
| source | packages/ds/src/components/input-field/InputField.tsx packages/ds/src/components/input-field/input-field.css |
with label + icon
bare — no label, no icon
component tokens
| token | source | description |
|---|---|---|
--input-field-bg | @arieare/ds/input-field.css | Input bar background. Defaults to --bkg-2 (cream surface). |
--input-field-border | @arieare/ds/input-field.css | Input bar border color. Defaults to --ink-1 (primary dark ink). |
--input-field-shadow | @arieare/ds/input-field.css | Input bar box-shadow. Defaults to 1px 1px 0px --ink-2 (muted offset shadow). |
--input-field-ink | @arieare/ds/input-field.css | Input value text color. Defaults to --ink-1. |
--input-field-placeholder-ink | @arieare/ds/input-field.css | Placeholder text color. Defaults to --ink-3 (muted). |
--input-field-label-ink | @arieare/ds/input-field.css | Label text color. Defaults to --ink-1. |
--input-field-icon-ink | @arieare/ds/input-field.css | Leading icon color. Defaults to --ink-2. |
--btn-h / --rds-interact / --p-size-6 / --p-size-8 | @arieare/ds/tokens.css | Shared sizing tokens: container height (20px), border-radius (2px), bar padding/gap (6px), label–bar gap (8px). |
--type-p-base / --type-p-small / --type-p-base-feature-settings | @arieare/ds/tokens.css | Input uses --type-p-base (14px/20px); label uses --type-p-small (12px/18px). Both apply the shared OpenType feature settings. |
props
| prop | type | default | description |
|---|---|---|---|
label | ReactNode | — | Optional label rendered above the input bar and linked via htmlFor. |
icon | ReactNode | — | Optional leading icon rendered inside the bar before the input text. |
id | string | — | Input id. Auto-generated via React.useId() when omitted; links the label htmlFor. |
placeholder | string | — | Placeholder text shown in muted ink when the input has no value. |
value / onChange | string / ChangeEventHandler | — | Controlled value contract. Use defaultValue for uncontrolled usage. |
...input attributes | InputHTMLAttributes<HTMLInputElement> | — | All standard input attributes (type, disabled, readOnly, etc.) forwarded to the underlying input element. |