-
Notifications
You must be signed in to change notification settings - Fork 162
Input Group Specification
Stanka Bozalieva edited this page Mar 13, 2018
·
5 revisions
Provides implementation of a simple common case, yet customisable input fields.
Developer:
- As a citizen developer, I want to add an input of different HTML input types(date, datetime-local, email, month, number, password, search, tel, text, time, url, week) so that the user can enter different information in the app.
- As a developer, I want to add a single-line input, so that the user has an example of the input needed.
- As a developer, I want to add a label (floating-animated, fixed), so that the user would know what to enter.
- As a developer, I want to add a placeholder, so that the user has an example of the input needed. A placeholder can be used without or with a fixed label.
- As a developer, I want to add a hint (left or/and right aligned), so that the user would have more details and updates (hints/errors) about this field. The hint text can contain text or/and icons.
- As a developer, I want to add a line input or/and text-field box, so that the user would know where to enter the text.
- As a developer, I want to add a required* input, so that the user wouldn’t miss those fields.
- As a developer, I want to add a prefix and suffix, so that I can make a compound input.
- As a developer, I want to have states and corresponding material design styles (enabled: idle & empty, hover, press, focus, idle & filled, error, disabled, read-only, valid/invalid, empty/filled )applied the entire input’s elements (divider, label, placeholder, hint text, line, field-box) so that the user would know the state they are in.
- As a developer, I want to timely inform the user about the input state through the hint text.
- As a developer, I want to be able to make the prefix and suffix actionable, so that the user can further interact with it.
- As a developer, I want to implement a multi-line input(textarea), so that the user can enter multiple lines of text.
- As a developer, I want to be able to add more properties and customize the input in terms of: max-min (length) values, read-only, add patterns so that I can adjust it to my needs.
End user:
- As an end user, I want enter characters in field, so that I can have custom values in the application.
- As an end user, I want to have visual indicator such as bottom-line, box outline, or border outline, so that I will know where I can enter the characters.
- As an end user, I want to have states, so that I know how to interact with the input group.
- As an end user, I want to have a label, so that I can specify a label for the input. I want the label to have the corresponding properties to my needs(floating or fixed).
- As an end user, I want to have a hint area, so that I get updates about my input such as counters, error/success messages, etc. I want the hint content to be aligned to the left and/or to the right accordingly.
- As an end user, I want to have an asterisk glyph in the label, so that I would know that the input is required.
- As an end user, I want to have prefix and/or suffix in the input, so that I would have more context.
- As an end user, I want to have the prefix and/or suffix actionable in the input, so that I can perform quick action on the input (example: clear input suffix icon).
- As an end user, I want to be able to add multiple lines of text in the input. I want to be able to resize my input so that I can reveal the entire text or hide parts of it.
- Have input that is focus-able.
- Handle events like blur and focus.
- Have input that provides a way to type characters.
- Have prefix**/-input/**-suffix options.
- Provide label, hint text, placeholder.
- Corresponding styles, animations and interactions (as per the material design guidelines). ...
An input is a text field where users enter specific information of different types. The inputs can be validated. Hints, placeholders, and visual states can be updated accordingly upon string input/interaction and data can be submitted.
Always include visual mock-up**
3.1. End User Experience
3.2. Developer Experience
3.3. Globalization/Localization
Describe any special localization requirements such as the number of localizable strings, regional formats
3.4. User Interface
Include a diagram linking the elements with the visual representation of the feature
3.5. Navigation
3.6. API
| Name | Description | Type | Default value | Valid values |
|---|---|---|---|---|
| Name | Description | Return type | Parameters |
|---|---|---|---|
| Name | Description | Cancelable | Parameters |
|---|---|---|---|
Specify only if applicable
| Assumptions | Limitation Notes |
|---|---|
https://material.angular.io/components/input/overview https://codepen.io/simeonoff/pen/dmyQqw https://material.io/guidelines/components/text-fields.html#text-fields-field-variations