Input

Design a text input component as a reusable form control, not a whole form. It should work for common fields like name, email, search, and notes, with one clear label, optional helper text, and a placeholder that shows an example rather than repeating the label.

Show the states that matter in real use: default, hover, focus, typing, filled, disabled, and error. The error state should keep the entered value visible and add a short message that tells the user what to change. If there is a success or valid state, keep it subtle.

Design for readability and speed. The label must stay visible, the focus ring must be obvious, and spacing between label, field, and helper text should feel intentional. Make sure the component still works at small sizes, with long text, and when the user tabs through it with a keyboard.

Make input fields delightful! Use micro-interactions for real-time validation, like gentle color changes to show correctness, or engaging animations upon successful entry.