Skip to content
Nucleus Docs

Inputter

<ns-inputter>
Overview Guidance Implementation

Overview

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

Configure

Most common input types

Special input types

mask=""

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

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

AttributeTypeDefaultDescription
helperstringThe helper text for the input.
open-helperbooleanfalseWhether the helper text should be open.
validationArray[]An array of validation objects.
disableNativebooleanfalse
showMessagebooleantrue
namestringThe name of the input.
valuestringThe value of the input.
labelIDstringThe ID of the label if outside of the component.
headingstringUsed for a checkbox or radio input to add a heading.
maskstringA mask to show what can be entered. Limits value length for the input.
separatorstringA separator character to be used with the mask.
ignore-separatorbooleanfalseWhether the separator should be ignored for the value.
typestringstandard
ignoreseparatorUse `ignore-separator` attribute.
ishelperopenUse `open-helper` attribute.

Properties

PropertyTypeDefaultDescription
helperstringThe helper text for the input.
isHelperOpenbooleanfalseWhether the helper text should be open.
isPristinebooleanA getter method to get pristine state of the form element.
isDirtybooleanA getter method to get dirty state of the form element.
validityValidityStateA getter method to get validity of the form element.
validationMessagestringA method to get a validation message combind from the validity states.
validationArray[]An array of validation objects.
disableNativebooleanfalse
showMessagebooleantrue
namestringThe name of the input.
valuestringThe value of the input.
labelIDstringThe ID of the label if outside of the component.
headingstringUsed for a checkbox or radio input to add a heading.
maskstringA mask to show what can be entered. Limits value length for the input.
separatorstringA separator character to be used with the mask.
ignoreSeparatorbooleanfalseWhether the separator should be ignored for the value.
typestringstandard

Slots

SlotPermitted tagsDescription
label<label>The label for the input.
tip-details<p>The tip details related to the helper.
anonymous<input><label><select><textarea>The form element passed in such as input, select, textarea.

Events

NameDescription
changeDispatched when the input value changes.
helper-toggleDispatched 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 true to 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 true to 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.

This page covers most of the ways you can use ns-inputter. Please reach out to us if you are unsure about a potential use. Here are some useful links to related content: