Inputs
- Amish Ladhu
References
Example
Usage
Structure
<mat-form-field>
<label class="required">Label Name</label>
<input matInput type="text">
<mat-hint>
Error message here
</mat-hint>
</mat-form-field>Container
Every input should have a
mat-form-fieldcontainer, which formats its' content styles and spacing, and facilitates spacing for any required input field error messages
Label
Use
<label>for input labels
Input
Use
matInputfor all instances of<input type="text">
‘Input Hint' Usage Rules
Use 'input hints' for individual/single input feedback. For whole page related feedback, see Snackbar usage rules.
Use
<mat-hint>container if the input is required and needs a ‘required message' e.g. This field is required or if the field has HTML5 input validation, e.g. email format check
If an input is required, add
class=”required”to the label, which will add a red asterix after the label to indicate the field must be completed
Disabled Inputs
Use
disabledtag within input, which will automatically pull in disabled input styling<input matInput type="text" disabled="disabled"> OR <input matInput type="text" disabled>
Inline Editing/Saving Text and Select Inputs
Normally, changes are made to the contents of an input and within corresponding panel footer, there will be a ‘Save’ button to save the changes.
However, there are a few instances where we do not have this ‘whole panel' save button, where instead inputs are saved on a change by change basis. This is achieved through an ‘inline’ set of controls to allow the enabling, changing and saving of an inputs content. The UX journey works as follows:
Click the ‘edit’ button to enable the input
Enter the new value
Click the ‘save’ button on the input
New value is saved without having to click a ‘whole panel’ save button
This method means that sensitive/impactful input values require a few purposeful UX interactions in order to be able to edit and save values, therefore preventing mistakes and errors. Currently, inline input editing is used on:
Advertisers > Advertiser > Value Transforms Table
Advertisers > Advertiser > Validations Lists Table
Campaign > Processr Table
Leads > Lead Profile Modal > Profile Tab Table [Development In Progress]
Input Prefix
N/A (Campaign > Publisher > Assign > Payout Column)