Input Group Specification

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.
As a developer, I want to be able to set the Input Group type globally using an InputGroupToken, so that components that use it internally use the globally set one.
As a developer, I want to be able to override a globally set Input Group type value on a component level, setting the type input property in the component explicitly.

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

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). ...

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.

Name	Description	Type	Default value
defaultClass	Gets/Sets the autogenerated class of the IgxInputGroupComponent	boolean	false
disabled	Gets/Sets if the input is disabled	boolean	false
element	An ElementRef property of the `IgxInputGroupComponent`	ElementRef	-
id	Gets/Sets the value of id attribute	string	igx-input-group-0
type	Gets/Sets how the input will be styled	string	line
supressInputAutofocus	Gets/Sets if input element will not automatically focus on click	string	line

Name	Description	Type	Default value
displayDensity	Returns the theme of the component	DisplayDensity	string
hasBorder	Returns whether the component has border	boolean	-
hasHints	Returns whether the component has hints	boolean	-
isTypeBorder	Returns whether the component type is border	boolean	false
isTypeBootstrap	Returns whether the component type is bootstrap	boolean	false
isTypeBox	Returns whether the component type is box	boolean	false
isTypeFluent	Returns whether the component type is fluent	boolean	false
isTypeFluentSearch	Returns whether the component type is fluentSearch	boolean	false
isTypeLine	Returns whether the component type is line	boolean	true
isTypeSearch	Returns whether the component type is search	boolean	false

Input Group Specification

Input Group Specification

Contents

Objectives

2. User Stories

Acceptance criteria

3. Functionality

Options

Accessors

4. ARIA Support

5. Assumptions and Limitations

6. References

Specifications

Clone this wiki locally