-
Notifications
You must be signed in to change notification settings - Fork 7
Masked input
Radoslav Karaivanov edited this page Feb 21, 2022
·
6 revisions
- Masked input specification
Team: Codex
Radoslav Karaivanov
Stefan Ivanov
- Diyan Dimitrov | Date:
- Stefan Ivanov | Date:
- Product Owner: Radoslav Mirchev | Date:
- Platform Architect: Damyan Petev | Date:
| Version | Author | Date | Notes |
|---|---|---|---|
| 1 | Radoslav Karaivanov | 21-Feb-2022 | First draft |
A masked input is an input field where a developer can control user input and format the visible value, based on configurable rules.
- Should provide a mask pattern for guiding user input and for display value format
- The following built-in pattern rules should be supported:
Mask character Description 0 requires a digit [0-9] 9 requires a digit [0-9] or whitespace # requires a digit [0-9], plus (+), or minus (-) sign L requires a letter [a-Z] ? requires a letter [a-Z] or whitespace A requires an alphanumeric [0-9a-Z] a requires an alphanumeric [0-9a-Z] or whitespace & any keyboard character (excluding space) C any character - Should support static symbols (literals) in the mask pattern
- Should provide a prompt symbol for customizing the unfilled parts of the masked pattern
- Should provide a way to get the control value verbatim (with literals included) or parsed and striped from literals/formatting
- Should support all the properties/API surface of the igc-input element where applicable.
- Should correctly manage and report its validation state, if any validation constraints are applied
- Should be supported as a component which participates in an igc-form submission
Developer stories:
As a developer I expect to be able to:
- set a name attribute so that the control is identifiable in the context of a web form
- set a value so that the control can be programmatically initialized or updated
- set a required attribute so that the controls becomes mandatory in the context of a web form
- set a disabled attribute so that the control can't be modified or interacted with
- set a readonly attribute so that the control value can't be modified but the user can still interact with it
- set an invalid attribute so that I can deterministically mark the control as invalid
- set an autofocus attribute so that the field can become focused on initial page load
- add a label attribute so that the user would know what to enter and easily differentiate between several inputs placed on the same page
- set a placeholder attribute so that the user has an example of the expected input value. A placeholder can be used without or with a label
- add a prefix and/or suffix content so that I can make compound, padded input fields comprised of icons and text
- add a **helper text **(left or/and right aligned) so that the user would have more details and updates (hints/errors) about this field
- have states and corresponding design styles (enabled: idle & empty, hover, press, focus, idle & filled, error, disabled, read-only, valid/invalid, empty/filled) applied to all input parts (label, placeholder, helper text, prefix, suffix, etc.) so that the user would know the state of the input and act accordingly
- alter between filled and outlined styles for material-styled inputs so that I can have differently styled material inputs
End user stories:
As an end user, I want to:
- enter characters in a field so that I can provide data to a web form or other parts of an application
- have a visual indicator, such as outline so that I will know which input field is currently on focus
- have different visual states so that I know how to interact with the input field
- a label so that I can identify the input
- see helper text so that I get updates about my input such as counters, error/success messages, etc
- have an asterisk glyph in the label so that I would know that the input is required
- have prefix and/or suffix in the input so that I would have more context
- 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)
A masked input is a text field where user input is controlled and filtered by a predefined masked pattern. The masked input can be validated. Helper text, placeholders, and visual states can be updated accordingly upon string input/interaction and data can be submitted.
TODO
TODO
A masked input is an input field where a developer can control user input and format the visible value, based on configurable rules
Mixins: SizableMixin, EventEmitterMixin
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
dir |
dir |
"ltr" | "rtl" | "auto" |
"auto" | The direction attribute of the control. |
label |
label |
string |
The label for the control. | |
mask |
mask |
string |
The mask pattern to apply on the input. | |
placeholder |
placeholder |
string |
Placeholder for the input. | |
prompt |
prompt |
string |
The prompt symbol to use for unfilled parts of the mask. | |
size |
size |
"small" | "medium" | "large" |
"medium" | Determines the size of the component. |
value |
value |
string |
The value of the input. If with-literals is set, it will return the current value with the mask (literals and all) applied. |
|
withLiterals |
with-literals |
boolean |
false | When enabled, retrieving the value of the control will return it with literal symbols applied. |
| Method | Type |
|---|---|
blur |
(): void |
focus |
(options?: FocusOptions | undefined): void |
| Event | Description |
|---|---|
igcBlur |
Emitted when the control loses focus |
igcChange |
Emitted when an alteration of the control's value is committed by the user |
igcFocus |
Emitted when the control gains focus |
igcInput |
Emitted when the control receives user input |
| Name | Description |
|---|---|
helper-text |
Renders content below the input |
prefix |
Renders content before the input |
suffix |
Renders content after the input |
| Part | Description |
|---|---|
container |
The main wrapper that holds all main input elements |
helper-text |
The helper text wrapper |
input |
The native input element |
label |
The native label element |
prefix |
The prefix wrapper |
suffix |
The suffix wrapper |
- The masked input does not expose a type attribute since it is always and input of type text
TODO
The encapsulated native input is the de facto focusable and interactive element. The input can be labeled using the label attribute, which utilizes the native <label> element to provide a semantically correct label that is fully accessible.
- Have an input that is focusable.
- Handle events like blur, focus, change and input.
- Provide label, hint text and a placeholder.
- Corresponding styles, animations and interactions (as per the material guidelines)