Input fields
Input fields are where users enter and edit text. It is usually part of the form components.
Anatomy
Value | Purpose |
aria-labelledby= “label” | The label of the input field. |
aria-multiline=“boolean” | Indicates the inputfield types. |
aria-placeholder=“string” | The input’s hint. |
aria-multiline=“boolean” | Indicates the inputfield types. |
aria-readonly=“boolean” | Indicates whether the input is read only |
aria-required=“boolean” | Indicates whether the input is required. |
aria-activedescendant | Indicates the logic of focus when input field triggers another component. |
aria-autocomplete | Indicates whether the users’s input will trigger a prediction of the intended value. |
Configurations
2.1 Size
The text input fields will come in 3 sizes: large, medium, and small. Use medium as default.
2.2 Label alignment
The text input field supports vertical and horizontal alignment. We use vertical as default.
2.3 Input width
The input expand to fill the entire width of the parent’s container. In order to set the width of the input, you can wrap it inside a parent container and set the width of the parent container. See responsiveness for details
2.4 Label-box width (horizontal alignment only)
The horizontally-aligned input field sits in a 12-columns grid system. The parent container is divided into 12 columns with a gap of 4px.
Customize the input field label’s width by setting the number of columns of the label-box.
There is a minimum width of 112px set on the input fields (excludind the lables) and if the parent’s container is not sufficient, the content will overflow.
2.5 Helper text
Helper text is optional.
2.6 Error message
Use the error-message to display an action to fix the error. You can keep the helper text which is optional. Additionally you can update the lable to display the nature of the error.
2.7 Prefix and Suffix
Prefix and suffix supports icon or text. You can chose either prefix or suffix or both. Icon and text can be mix and matched.
2.8 Type
There are two types of input fields: single-line, and multi-lines. singleLine is used as default.
2.9 Required
Required is a boolean value. A required field can not procees without a valid user input.
4. States
Input fields have 8 states: empty, filled, selected, hover, active/focus, read only, disabled and error. Please read the difference between disabled and read-only state
5. Keyboard experience
The keyboard experience for a single line input is different from multiline input.
5.1 SingleLine input
5.2 MultiLine input
7. Resilience and responsiveness
7.1 Minimum width
There is a minimum width of text input box of 112px. Once parent container shrinks below the width, the input box stops to shrink.
7.2 Label wrapping
Label expand as much as it can within the confines of the parent container and then starts wrapping the text to the next line.
7.3 layout-fit (default)
The width of the input box grows or shrinks with the container’s width. See 2.3 Input width above.
8. Visual specs
8.1 Margin
Regardless of text input field’s size,
- The margin between input box and labels is always coherent.
- The margin between prefix and input text is always coherent.
- The margin between icon and microcopy in error state is always coherent.
8.2 Padding
Prefix and input text are always left aligned. Suffix is right aligned
8.3 Font size
8.4 Icon size
8.5 Outline width
- 1px border is used by default. It applies to default, filled, hover, and readOnly;
- 2px is used in active/filling and error state.