Input Field Design Component from Shipfaster UI Design Systems

Shipfaster: UI Components

Input Field

Overview

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

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.