Sidera/Components/Input
Input
Text inputs let people enter and edit a single line of content. They make their state — empty, focused, filled, invalid — unmistakable at a glance.
CategoryForms
StatusStable
Version2.0
01 —Overview
Use an input whenever someone needs to type a short, free-form value. Always pair it with a persistent label, and surface validation inline and immediately — never only on submit.
02 —States
The stateprop drives the field's meaning: neutral by default, error for invalid input, success for confirmed values.
Enter a valid address
Looks good
03 —Sizes
04 —Anatomy
- Label — always visible, describing the value expected.
- Field — the bordered container holding text and caret.
- Helper / error — guidance or validation beneath the field.
05 —Usage
Do
- Keep labels permanently visible.
- Validate inline, as soon as it's useful.
- Match field width to expected input length.
Don't
- Rely on placeholder text as the label.
- Hide errors until form submission.
- Use one giant field for everything.
06 —Properties
PropTypeDefault
typetext | email | password | …text
inputSizesm | md | lgmd
statedefault | error | successdefault
labelstring—
helperstring—
disabledbooleanfalse
07 —Accessibility
- Every field has a programmatically associated <label> via htmlFor/id.
- Helper text is linked with aria-describedby and announced.
- Invalid fields expose aria-invalid.
- Focus ring meets 3:1 contrast against the background.