Text field

A single-line input with a visible label above and help text below; mono inside when the value is a token, path or command.

Label, field, help

Light

Token name

Dot path, as written in the token files.

Graphite

Token name

Dot path, as written in the token files.

Story: /stories/text-field/default/

Guidelines

• 46px tall, stroke-ink outline in border-strong, radius-sm.
• Focus: the border turns action-bg plus the stroke-focus ring in action-subtle.
• Always a real <label>; never placeholder-only. Help text is linked with aria-describedby.

Tokens used

Read from the component’s source:

--action-bg--action-subtle--bg-surface--border-strong--fg-default--fg-muted--font-mono--font-sans--radius-sm--stroke-focus--stroke-ink--type-body-sm-size--type-label-weight