Form Control Design Component from Outline: Figma Wireframe Kit

Shipfaster: UI Components

Outline Wireframe: UI Components

Form control

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.

Form controls are of three major types: a. Radio buttons are used for mutually exclusive choices, not for multiple choices. Only one radio button can be selected at a time. b. Toggle is a control that is used to quickly switch between two possible states. c. Checkboxes are used when there are multiple items to select in a list.

When to use

When inside a form, you want to allow user input for selecting or toggling any items.
For use in certain settings pages.

Anatomy

Control field: Select from a list of 3 types of controls - radio, checkbox, and switch.
Label: Refers to the context of control.
Description: Provides additional information on the control that helps user perform the specific action easily.

Best Practices

These controls are mostly used inside forms and settings page.
Make sure you use the 'active or ' state variant for showing feedback on when the user presses the control.