Shipfaster: UI Components

Input Field

Input fields refer specifically to the text input fields, which are used to obtain data from the users.


Breadcrumbs are used when you have a large amount of content organised in hierarchical structure with defined categories (multiple sections that can be divided into more sub-sections). An excellent example is e-commerce site, in which a large variety of products is grouped into logical categories. They inform visitors of their current location in relation to the entire site hierarchy. Whereas they also improve the find-ability of site pages. The structure of the site is more easily understood because it is laid out in a breadcrumb.

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 of input filed
  1. Label: Indicates what type of data the users needs to put in.
  2. Field: Space for entering user input. Also accompanied by a leading icon and placeholder text.
  3. Add ons: Improves clarity and adds supporting elements such as text and icons.
  4. Caption: Provides optional more information to the users. Also used as providing error messages on the specific input field.

Best Practices

  1. Use a label wherever necessary. Keep them short, clear and fully visible. They shouldn’t take multiple lines.
  2. 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.

All Products

Outline: Figma’s Ultimate Wireframe Kit

Stay on top of testing ideas and prototypes with a wireframe kit that simplifies your process

Pricing Icon
800+ of Downloads
Review Stars
800+ downloads
Learn More
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.