#Input

Short, single-line free text — reach for Textarea when the answer runs to sentences, and Select when it comes from a known set. Wrap it in Field for the label and description; a placeholder is an example of the answer, never a substitute for the label and never where required information lives.

Source · Storybook

#Usage

import { Input } from '@wallarm-org/design-system/Input';

#Examples

#Sizes

A 36 / 32 / 24px scale shared with Textarea, InputGroup and the date inputs, so a row of mixed fields lines up. Reach below default only in dense places like a table filter.

#Focused

Focus is a ring outside the border rather than a border change, so nothing reflows by a pixel when the reader tabs through a form.

#Disabled

Dimmed and not focusable. Say elsewhere what would enable it — a disabled field with no explanation reads as broken.

#With value

A filled field. Placeholder text is deliberately set at the same size as real input so the text doesn't jump when typing starts; only its colour is lighter.

#With error

error reddens the border and sets aria-invalid. It shows that something is wrong but not what — the message is FieldError's job.

#Props