Skip to content

Input Group Specification

Stanka Bozalieva edited this page Mar 13, 2018 · 2 revisions

Input Group Specification

Contents

  1. Overview
  2. User Stories
  3. Functionality
  4. ARIA support
  5. Assumptions and Limitations
  6. References

Objectives

Provides implementation of a simple common case, yet customisable input fields.

2. User Stories

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.

Acceptance criteria

  1. Have input that is focus-able.
  2. Handle events like blur and focus.
  3. Have input that provides a way to type characters.
  4. Have prefix**/-input/**-suffix options.
  5. Provide label, hint text, placeholder.
  6. Corresponding styles, animations and interactions (as per the material design guidelines). ...

3. Functionality

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

Options

Name Description Type Default value Valid values

Methods

Name Description Return type Parameters

Events

Name Description Cancelable Parameters

4. ARIA Support

Specify only if applicable

5. Assumptions and Limitations

Assumptions Limitation Notes

6. References

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

Clone this wiki locally
You can’t perform that action at this time.