Input
Single-line text entry with its own label, hint, error and character count. The label sits on top, at the start, or is hidden.
Master
Switch size, label position, type and message. Toggle hidden label, required, invalid and disabled. The field is live.
Usage
Use Input for short text: names, emails, amounts, search. It is one component: pass label, hint and error as props, no Field wrapper. Always pass label; set hideLabel when the screen already makes the purpose clear, like a search box. required adds a red asterisk and the native required attribute. error shows a red border and a message under the field; invalid shows the red border alone. prefix and suffix are text inside the field, like https:// or USD. maxLength adds a live counter. type="file" opens the native file picker; accept limits the file types and multiple allows more than one. See contracts/input.json for the full contract. A label set at the start goes back on top of the field when the box around it is narrower than 554px, since a 234px label column would leave too little of the field to type in.
Do's
- Short text in a form: name, email, phone, amount.
- A search box above a table or list.
- A value with a fixed prefix or suffix, like a URL or a currency.
Don'ts
- Do not invent a local Field, FieldLabel, FieldDescription, FieldError, FormItem, InputGroup or SearchInput.
- Do not build a local tooltip for help. Pass help; it shows in the kit HelpPopover.
- Do not use a placeholder as the label. Pass label, and hideLabel if it must not show.
- Do not use for long text. Use Textarea.
- Do not use for picking from fixed options. Use RadioGroup, or Select when it exists.
- Do not put the error only in the placeholder or only in color. Use error.
- Do not build a local FileInput, upload button or hidden <input type="file">. Use Input type="file".
- Do not use raw hex.
<Input label="Email" labelPosition="top" size="md" type="email" placeholder="you@example.com" />