Configurator
Usage
<Input placeholder="Search products…" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | string | "text" | Native input type (text, email, search, etc.). |
| placeholder | string | — | Placeholder text shown when empty. |
| disabled | boolean | false | Disables interaction and dims the field. |
| className | string | — | Additional classes, merged via tailwind-merge. |
| ...props | InputHTMLAttributes | — | Any native <input> attribute. |
Do's and Don'ts
Do
- ·Pair every input with a visible label or a clear placeholder — never rely on placeholder alone for required fields.
- ·Use type="email" for email fields so mobile keyboards adapt.
Don't
- ·Don't round the corners beyond the 4px token — sharp inputs match the rest of the form language.
- ·Don't disable an input without also explaining why nearby (e.g. "Sold out").