Inputter

Overview

A component to allow for user inputs of type text, radio, checkbox, select, date, tel, number, textarea, search.

✨ This is an auto-generated AI summary of the ns-inputter's documentation. It may not be accurate. ✨

Use these types of inputs to help customers enter and select information:

Text (including tel, email, and number)
Radio button
Checkbox
Select (drop-downs)
Textarea

If you intend to use a password inputter, please see the ns-password component.

Configure

Most common input types

Configure

mask=""

Configure

mask="" and separator=""

Configure

Autocomplete

Inputs will resize when using the autocomplete attribute for:

given-name
family-name
postal-code

Use native autocompletes on inputs (Autocomplete attribute documentation)

See the Email example for reference.

Guidance

Implementation

Placement

The ns-inputter component can be used in the following components:

<form> wrapped in <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: The toggle to open the helper text.
Type: boolean
Default: false

`validation`

Property: validation
Description: The list of validations to validate the value of the input.
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 to reference in form data.
Type: string

`value`

Property: value
Description: The value of the input. It holds comma separated value for multi-input (eg., checkbox).
Type: string
Default

`labelID`

Property: labelID
Description: The ID of the label element if outside of the component.
Type: string
Default

`heading`

Property: heading
Description: The heading to group related checkbox or radio inputs.
Type: string
Default

`mask`

Property: mask
Description: A mask to show the format of the input. The value length is limited by the mask length.
Type: string
Default

`separator`

Property: separator
Description: A separator character to be used in the mask format.
Type: string
Default

`ignore-separator`

Property: ignoreSeparator
Description: The toggle to ignore the separator while validating tthe length of 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. The label content needs to be related to the purpose of the value. This is required for single input types (text, email, etc).
`tip-details`	`<p>`	The tip details related to the `helper` text of the inputter.
Anonymous slot	`<input>` `<label>` `<select>` `<textarea>` `<ns-column -> ns-selector>`	The form element wrapped by the inputter.

Events

Name	Description
`change`	Dispatched when the input value changes. It holds the value of the input.
`helper-toggle`	Dispatched when the helper is toggled. It holds the value of the `open` state of the helper.

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

`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. e.g. minDate('20/12/2020')
maxDate(date) - Shows an error if the input vale date is greater than the provided date. e.g. 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 true to the validation function. e.g. 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 true to the validation function. e.g. 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.

Last updated: Mar 27, 2024