Overview
Input Field
Input fields refer specifically to the text input fields, which are used to obtain data from the users.
Overview
Input fields allow users to enter text into a UI. They typically appear in forms and dialogs. Shipfaster offers two major style of input fields - Box style and Line style.
When to use
- To gather basic information from users.
- To specify what kind of data users can enter.
Anatomy
- Label: Indicates what type of data the users needs to put in.
- Field: Space for entering user input. Also accompanied by a leading icon and placeholder text.
- Add ons: Improves clarity and adds supporting elements such as text and icons.
- Caption: Provides optional more information to the users. Also used as providing error messages on the specific input field.
Best Practices
- Use a label wherever necessary. Keep them short, clear and fully visible. They shouldn’t take multiple lines.
- Use the helper text for showing errors instead of putting them separately.
Recommended resources
Get instant access to over 6,000 Figma Components with Shipfaster UI. A Figma UI Kit & Design system used by over 2,000 designers.
180+ ratings
Figma's most powerful and comprehensive UI kit and design system. Get instant access to over 6,000 components.
Learn more