Inputter
<ns-inputter> 
Overview
A component to allow for user inputs of type text, radio, checkbox, select, date, tel, number, textarea, search.
Most common input types
Special input types
mask=""
mask="" and separator=""
Autocomplete
Inputs will resize when using the autocomplete attribute for:
given-namefamily-namepostal-code
Use native autocompletes on inputs (Autocomplete attribute documentation)
See the Email example for reference.
Guidance
Considerations
- Use defined conventions for common fields.
- Use standard examples for placeholder copy.
- If you are asking for first and last name within a text input, spell check should be disabled.
- Refer to the text input auto complete definitions.
- Always try and have a default selected radio button.
Implementation
Placement
The ns-inputter component can be used in the following components:
<ns-form><ns-form-group>
Placement has not yet been defined in ns-inputter.
Specification
Attributes
helper
- Property
helper- Description
- The helper text for the input.
- Type
string
open-helper
- Property
isHelperOpen- Description
- Whether the helper text should be open.
- Type
boolean- Default
false
validation
- Property
validation- Description
- An array of validation objects.
- Type
Array- Default
[]
disableNative
- Property
disableNative- Type
boolean- Default
false
showMessage
- Property
showMessage- Type
boolean- Default
true
name
- Property
name- Description
- The name of the input.
- Type
string
value
- Property
value- Description
- The value of the input.
- Type
string- Default
labelID
- Property
labelID- Description
- The ID of the label if outside of the component.
- Type
string- Default
heading
- Property
heading- Description
- Used for a checkbox or radio input to add a heading.
- Type
string- Default
mask
- Property
mask- Description
- A mask to show what can be entered. Limits value length for the input.
- Type
string- Default
separator
- Property
separator- Description
- A separator character to be used with the mask.
- Type
string- Default
ignore-separator
- Property
ignoreSeparator- Description
- Whether the separator should be ignored for the value.
- Type
boolean- Default
false
type
- Property
type- Type
string- Default
standard
Slots
| Slot | Permitted tags | Description |
|---|---|---|
label | <label> | The label for the input. |
tip-details | <p> | The tip details related to the helper. |
| Anonymous slot | <input> <label> <select> <textarea> | The form element passed in such as input, select, textarea. |
Events
| Name | Description |
|---|---|
change | Dispatched when the input value changes. |
helper-toggle | Dispatched when the helper is toggled. |
helper
A way to help the user understand why or why not enter information
labelID
Used if the label is outside of ns-inputter, such as a heading for the page. Always try to use a label or the heading first. Only use this if the element you are referring to and the label are the same.
mask
This will create a max length on the input to the length of the mask.
separator
Requires a mask. Can only be one character.
ignore-separator
Setting the ignoreseparator property to true will force length validations (such as minLength and maxLength) to not include the separator when calculating the length. eg. With ’-’ as the separator: ‘12-34-56’ would have a length of 8, if ignoreseparator is true it would count it as 6 characters.
slot="label"
To be used for single input types (text, email, etc).
slot="tip-details"
This requires helper property which is initially hidden and can be revealed by the user when they click on the helper text.
validation
It is possible to have multiple validations. For example: [“isRequired”, “isNumber”, “isInteger”] Some of the validation options can be configured by passing in values within the parentheses:
- minLength(x) - Shows error if the input value is less than x chars.
- maxLength(x) - Shows error if the input value is greater than x chars.
- isDate() - Shows error if the input value is not a valid date, the expected format is dd/mm/yyyy
- minDate(date) - Shows an error if the input value date is less than provided date. eg.
minDate('20/12/2020') - maxDate(date) - Shows an error if the input vale date is greater than the provided date. eg.
maxDate('31/12/2022') - isPostcode(includeEircode) - Shows an error if the input value is not a valid UK postcode. This validation will include Eircode (Irish postcodes) when you pass a parameter of
trueto the validation function. eg.isPostcode(true) - isPhoneNumber(includeIreland) - Shows an error if the input value is not a valid UK phone number. This validation will include Irish phone numbers when you pass a parameter of
trueto the validation function. eg.isPhoneNumber(true)
Anonymous slot
For single type inputs (text, email, etc), there’s no need to add id/for unless you need to on the <label> and <input>
Make sure to add id/for if it is a checkbox, select or radio input type.
Be careful when adding additional elements outside of input and label * these scenarios haven’t been tested and may need a request for change raised.