Input

The Guides tab is for the things that are true after it works. If it belongs in "how do I install this", it goes in Get Started; if it is a prop table, it goes in API.

Composing it

InputInputA text input, and only the drawing of one - state and labels belong to the form and to Field.@sushindustries/ui · content is the control and nothing else - no label, no hint, no error state. Pair it with FieldFieldA labelled control with one line under it - the error is announced by being pointed at, not by being red.@sushindustries/ui · content for those:

import { Field, Input } from "@sushindustries/ui";

<Field label="Email" hint="I'll only use this to reply">
	<Input type="email" name="email" />
</Field>;

FieldFieldA labelled control with one line under it - the error is announced by being pointed at, not by being red.@sushindustries/ui · content nests the control inside a <label>, so the association needs no id to survive a refactor, and it wires aria-describedby to the hint or error text automatically. Passing error to FieldFieldA labelled control with one line under it - the error is announced by being pointed at, not by being red.@sushindustries/ui · content is what turns on the red border - InputInputA text input, and only the drawing of one - state and labels belong to the form and to Field.@sushindustries/ui · content itself has no invalid state of its own to set.

When not to use it

For anything that is not a single line of text - a multi-line field is TextareaTextareaA textarea in the same clothes as Input, growing with its content where the browser allows.@sushindustries/ui · content, a fixed set of choices is a select or a radio group. InputInputA text input, and only the drawing of one - state and labels belong to the form and to Field.@sushindustries/ui · content passes through the full native attribute surface, so type="number" or type="date" both work, but the moment the value needs formatting or parsing beyond what the browser's own input types do, that logic belongs in the consumer, not in this component.