Geist Design System

Input

Retrieve text input from a user.

Default

Automatically clears the input if escape is pressed.

Displays the ⌘ K shortcut to indicate that the input supports a command palette.

Transitions to showing Esc when the field is dirty.

An error message.

Pick <Input> for a single line of free-form text such as names, domains, or tokens.
Switch to Textarea the moment content can wrap to multiple lines.
Use Combobox when the value comes from a known list the user filters by typing.
For an inline search box, set the search variant with a scoped placeholder like Search projects; don’t embed a <SearchInput> inside an unrelated form.

Validate on blur, not on every keystroke; surface the message by passing a string to error.
Trim leading and trailing whitespace before submit so example.com and example.com resolve to one value.
Keep the field focusable while saving; pair disabled with a spinner only when input is impossible.
Don’t wrap a labelled <Input> in a Tooltip; put the explainer on a sibling icon button so the label stays announced.

Labels are short Title Case nouns: Project Name, Domain, Environment Variable Name.
Placeholders show an example value (my-awesome-project, example.com), never instructions like Enter your project name.
Helper text is sentence case, one sentence with a trailing period, on a sibling element wired through aria-describedby.
Validation names the field and the constraint, ends in a period, and skips please (Project name is required., Code must be 6 digits.).

Passing a string to label requires id; the InputPropsWithStringLabelAndId union won’t compile without it and screen readers lose the association.
For icon-only affordances inside a row of inputs, use <Button shape="circle" svgOnly aria-label="…"> rather than an unlabeled icon.
A SearchInput placeholder names the scope (Search projects) so the role is clear without sighted context.

Was this helpful?