Input

The Input component supports all HTML5 types: text, email, password, number, tel, url, search, date, time, file, and more. Each type provides appropriate keyboard layouts on mobile and built-in browser validation where applicable.

Error states are shown by applying error styling (typically red border) and displaying an error message below the input. Always pair visual indicators with text messages so users understand what's wrong and how to fix it.

Use placeholders for examples or hints, not as replacement for labels. Labels should always be visible. Good placeholder: "john@example.com" as an email format example. Bad: using placeholder instead of a proper label, which disappears when typing.

Password inputs should offer a visibility toggle (eye icon) so users can verify what they typed. This reduces errors, especially on mobile where typing is more difficult. The Input component can include this as a suffix addon.

Always pair inputs with labels (using for/id association), provide clear error messages, ensure sufficient color contrast, support keyboard navigation, and use appropriate input types for mobile keyboard optimization and screen reader clarity.

Yes, this Figma Input component matches the shadcn/ui implementation exactly, ensuring your form inputs maintain consistent styling, states, and behavior from design to production code.