Forms
Forms are used to accept the user's input. They can be displayed in many different ways: input- or select-fields, check boxes or radio buttons.
They are an important element in online shops, so it is even more essential that they are designed to be user-friendly. They serve to get information and guide the user through each task with minimal effort.
Possible use cases#
- Login and registration (check-in, check-out)
- Transaction (orders, payment)
- Contact (support, callbacks, requests)
- Data collection (lotteries, newsletters, surveys)
- Contribution (blogs, comments, posts)
Recommendations#
- Always try to keep the form and the text as short as possible!
A short form helps the user to get a fast overview and he recognizes easy what is required. - If you use an input field as a single row or with a fixed height, demonstrate an overflow text (clipping) by an ellipse.
- If there is more than one option but only one can be selected, use a radio button instead of a checkbox.
- The open list of options in a select-field is always the native list of the browser.
Overall styling#
- Text-style is basic.
- The line-height is set to default.
- Corners have a 2px radius.
- Borders have a 1px thickness.
- Hover or focus states are always shown with a border in brand-primary-base.
- Icon size is 24x24px.
- Important! The colors of the icons follow the basic rules for icons.
- The background color is basic-white, except for the disabled state displayed in gray-background.
Checkbox#
- Choose a checkbox if the user must make one or more decisions about a particular element.
- Each checkbox in a group represents a separate and independent choice.
- Checked checkboxes use an embedded element as icon which isn't included in the icon sprite.
| States | Attributes | Preview |
|---|---|---|
| Default | text-color: gray-darker border: gray-base |  |
| Hover / Focus | text-color: brand-primary-base border: brand-primary-base |  |
| Disabled | text-color: gray-base border: gray-light |  |
| Error | text-color: danger-base border: danger-base |  |
| Checked: Default | text-color: brand-primary-base border: gray-base icon-color: brand-primary-base |  |
| Checked: Hover / Focus | text-color: brand-primary-base border: brand-primary-base icon-color: brand-primary-base |  |
| Checked: Disabled | text-color: gray-base border: gray-light icon-color: gray-light |  |
| Checked: Error | text-color: danger-base border: danger-base icon-color: danger-base |  |
Radio button#
- Choose a radio button if the user needs to select a single option from multiple options, or if you want the user to carefully consider the options and see all available ones.
- Selected radio buttons use our "bullet.svg" as icon.
| States | Attributes | Preview |
|---|---|---|
| Default | text-color: gray-darker border: gray-base |  |
| Hover / Focus | text-color: brand-primary-base border: brand-primary-base |  |
| Disabled | text-color: gray-base border: gray-light |  |
| Error | text-color: danger-base border: danger-base |  |
| Selected: Default | text-color: brand-primary-base border: gray-base icon-color: brand-primary-base |  |
| Selected: Hover / Focus | text-color: brand-primary-base border: brand-primary-base icon-color: brand-primary-base |  |
| Selected: Disabled | text-color: gray-base border: gray-light icon-color: gray-light |  |
| Selected: Error | text-color: danger-base border: danger-base icon-color: danger-base |  |
Input field#
- Use input fields in the various states to show the user that he can enter data.
They typically appear in forms and dialogs.
| States | Attributes | Preview |
|---|---|---|
| Placeholder | text-color: gray-base border: gray-base |  |
| Placeholder-Hover | text-color: gray-base border: brand-primary-base |  |
| Focus (text input) | text-color: gray-darker border: brand-primary-base |  |
| Default | text-color: brand-primary-base border: gray-base |  |
| Default-Hover | text-color: brand-primary-base border: brand-primary-base |  |
| Disabled | text-color: gray-base border: gray-light |  |
| Error | text-color: danger-base border: danger-base |  |
| Success | text-color: brand-primary-base border: brand-primary-base |  |
Select field#
- The select field is part of forms and opens a list of options.
- The consistent appearance of a select field compared to other form elements (input field, checkbox, etc.) is important and also refers to the different states.
- Select fields use our "arrow-down.svg" as icon.
| States | Attributes | Preview |
|---|---|---|
| Default | text-color: brand-primary-base border: gray-base icon-color: gray-darker |  |
| Hover / Focus | text-color: brand-primary-base border: brand-primary-base icon-color: gray-darker |  |
| Disabled | text-color: gray-base border: gray-light icon-color: gray-base |  |
| Error | text-color: danger-base border: danger-base icon-color: gray-darker |  |
| Success | text-color: brand-primary-base border: brand-primary-base icon-color: gray-darker |  |
Text area#
- Use text area when there is a need for collecting long responses. They are typically used when users are required to leave feedback.
- Text area element always contains a placeholder text. That way users are encouraged to interact with it.
- Container has a fixed height and becomes scrollable if there are more than four lines of text. Once it is scrollable, a scroll bar appears as an indicator (scroll bar style and behavior depend on the browser).
| Behavior | Preview |
|---|---|
| Text overflow is hidden inside the container. When the text is scrolled, it is cut at the top and bottom outline of the container. |  |
| States | Attributes | Preview |
|---|---|---|
| Placeholder | text-color: gray-base border: gray-base |  |
| Placeholder-Hover | text-color: gray-base border: brand-primary-base |  |
| Focus (text input) | text-color: gray-darker border: brand-primary-base |  |
| Default | text-color: brand-primary-base border: gray-base |  |
| Default-Hover | text-color: brand-primary-base border: brand-primary-base |  |
| Disabled | text-color: gray-base border: gray-light |  |
| Error | text-color: danger-base border: danger-base |  |
Labels#
- Labels are part of the text area, input field and select field.
- They use basic-bold as label- and basic as optional-text.
- Give each form element a unique label.
- The (optional) part is fixed and is used for labels where user input isn't mandatory.
| States | Attributes | Preview | Combinations |
|---|---|---|---|
| Default | text-color: gray-darker |  |  |
Spacing & measurements#
| Type | Attributes | Preview |
|---|---|---|
| Horizontal | 8px margin between radiobutton (or checkbox) and optional text 8px margin between label and optional text 16px padding between text (or icon) and container 16px padding between text and container |     |
| Vertical | Input field: Text is always centered to container height. Text area: LG: 11px MD-XS: 9px |   |
| Height | Input field: LG: 48px MD-XS: 40px Width depends on device and usage. Text area: LG: 135px MD-XS: 120px |   |
| Distance | 8px between form and label 32px between form blocks |  |
Our workflow in Sketch#
- Use the "Overrides"-function to enter text.
- Fill in "space" to show an empty input-or select field.
- Demonstrate the different states by changing the predefined layer-style.
- If you don't want to show an icon, just select "Default" in the "Overrides"-function from the checkbox layer-styles.
- Pick the label symbol out of the library.
Change log#
Added#
Sketch,Doc: "Form" | Added text area component for long text input
Changed#
Sketch: "Form" | Adjusted input and select fields to new grid settings
Changed#
Sketch: "Form" | Adapted component input field and form select field to new grid settings
Changed#
Doc: "Form" | Clean up the documentation for the right structure and sentence case
Changed#
- "Form" | Changed symbols: with layer-styles settings (checkbox, input- & select-field)
- "Form" | Changed symbols: with radius symbol
Changed#
- "Form" | Changed description: checkbox
Fixed#
- "Form" | Fixed description: disabled icon-color from "gray-darker" to "gray-base"
Changed#
- "Form" | Moved symbols to sketch web kit
Fixed#
- "Form" | Fixed symbol: MD-XS input-field/default-hover icon from "arrow-down" to "placeholder"
Added#
- "Form" | Added description: color of arrow in select-field
- "Form" | Added description: text-style and usage of labels
Changed#
- "Form" | Changed description: label
Fixed#
- "Form" | Fixed symbol: color of arrow-down of MD-XS select-field/disabled from "gray-light" to "gray-darker"
Removed#
- "Form" | Removed symbol and description: "label/disabled" of input- and select-field
Added#
- "Form" | Added symbols and description: input-fields, select-fields (MD-XS)
Changed#
- "Form" | Changed symbols to new smart layout of Sketch
Fixed#
- "Form" | Fixed symbols of checkbox, radio button, input- and select-field: color of disabled state from "gray-light" to "gray-base"
Fixed#
- "Form" | Fixed symbols of radio-button: resizing options for "success"-state
- “Form" | Fixed symbols of select-field: padding of text frame to "16px"