Input Specification

Input 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 customizable input fields.

2. User Stories

Developer:

• As a 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 label, 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 required* input, so that the user wouldn’t miss those fields.
• As a developer, I want to add a prefix and/or suffix content, so that I can make a compound, padded input of icons and text.
• As a developer, I want to add a helper text (left or/and right aligned), so that the user would have more details and updates (hints/errors) about this field. The helper text can contain text or/and icons.
• 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 all input parts (label, placeholder, helper text, prefix, suffix, etc.) so that the user would know the state they are in.
• As a developer, I want to be able to make the prefix and suffix actionable, so that the user can further interact with them.
• 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 to enter characters in a field, so that I can type in custom values in the application.
• As an end user, I want to have a visual indicator, such as outline or a line, so that I will know which input field is currently on focus.
• As an end user, I want to have states, so that I know how to interact with the input field.
• As an end user, I want to have a label, so that I can identify the input.
• As an end user, I want to have see helper text, so that I get updates about my input such as counters, error/success messages, etc.
• 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 actionable prefix and/or suffix in the input, so that I can perform quick action on the input (example: clear input suffix icon).

Acceptance criteria

1. Have input that is focusable.
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. Helper text, placeholders, and visual states can be updated accordingly upon string input/interaction and data can be submitted.

3.3. API

3.3.1 Properties

You should be able to configure the igc-input by setting its properties:

Name	Description	Type	Default value	Reflected
name	Sets the name of the input field.	string	-	false
value	Sets the value of the input field.	string	-	false
type	Sets the checked state of the type of the input field.	'email', 'number', 'password', 'search', 'tel', 'text', 'url'	false	text
pattern	Pattern to validate the input against.	string	false	-
disabled	Sets the disabled state of the input field.	Boolean	false	true
required	Sets the required state of the input field.	Boolean	false	true
valid	Sets the validity of the radio button.	Boolean	false	true
invalid	Sets the validity of the radio button.	Boolean	false	true
size	Sets the size of the input field.	'small', 'medium', 'large'	true	large
label	Sets the label of the input field.	string	false	-
placeholder	Sets the placeholder of the input field.	string	false	-
readonly	Sets the the input field to read-only mode.	Boolean	true	false
minlength	The minimum length of the input value.	number	false	-
maxlength	The maximum length of the input value.	number	false	-
min	The minimum value of the input.	string / number	false	-
max	The maximum value of the input.	string / number	false	-
autocomplete	The autocomplete attribute of the input.	string	false	-
autofocus	Automatically focuses the input on page load.	Boolean	false	false

3.3.2 Events

The igc-input emits the following events:

Name	Description	Type
igcFocus	Emitted when the input field gains focus.	-
igcBlur	Emitted when the input field loses focus.	-
igcChange	Emitted when the input field changes its checked state.	-
igcInput	Emitted when the input field receives input.	-

3.3.3 Methods

The igc-input exposes the following methods:

Name	Description	Arguments
focus	Sets the radio on focus.	options: FocusOptions
blur	Removes the focus from the radio	-
reportValidity	Checks for validity and shows a validation message if the component is invalid.	-
setCustomValidity	Sets a custom validation message. If the message is not empty, the field will be considered invalid.	message: string

3.3.4 Slots

Name	Description
prefix	The prefix slot.
suffix	The suffix slot.

3.3.5 CSS Parts

Name	Description
start	The input field button start part, containing the prefix.
middle	The input field middle part.
end	The input field button end part, containing the prefix.

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