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.

Figma

Please note: The ns-inputter Figma component configuration instructions are available only to members of the British Gas workspace who have access to the Nucleus Figma UI Kit.

Configuration instructions

(Opens in Figma).

Additional configuration instructions for radio and checkbox

(Opens in Figma).

Last updated: Oct 28, 2024