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.
- 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.
- 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.
Get instant access to over 6,000 Figma Components with Shipfaster UI. A Figma UI Kit & Design system used by over 2,000 designers.