Text Input

A Text Input is a form element that provides users with a way to read, input, or edit data.

Usage

When to use

• As a form element that provides users with a way to read, input, or edit data in a freeform way.

When not to use

• For multi-line text input, consider Textarea.
• To allow the user to make a selection from a predetermined list of options, consider Checkbox, Radio button, or Select.

Types of text inputs

Text Input accepts a subset of types and offer built in styling for the following:

Text

Password

A password field has a visibility toggle. By default, a button appears allowing users to switch easily between visible and obfuscated input.

Search

Text Input accepts the type of search which users can enter search queries into.

States

Default state

Loading state

While a query is running, a spinner takes the place of the search icon at the end of the field. Keep the field editable while it spins, so a user can correct the query without waiting.

Search placement

Date and time

Telephone

Required and optional

For complex forms, indicate required fields. This is the most explicit and transparent method and ensures users don’t have to make assumptions. Read more about best practices for marking required fields in forms.

Required

Optional

For shorter, simpler forms (e.g., login/signup and feedback requests), indicate optional fields instead.

Readonly, disabled, and hidden fields

Readonly, disabled, and hidden fields are very similar, but there are key differences to be aware of when choosing the correct type of Text Input. Since these fields are not editable by a user, we recommend using them sparingly.

Readonly

Readonly fields are not editable by the user but the value in the field is passed when the form is submitted.

Disabled

Disabled fields are also not editable by the user and the value in the field is not passed when the form is submitted.

Hidden

Hidden fields are not visible to the user but the value in the field is passed when the form is submitted.

Character Count

Use a character count to communicate the current length of the value in an input and whether it meets or exceeds the length requirements of the field.

Default messages

Which requirements the field has decides the message: it names the relationship between the current length of the value and the maximum length, the minimum length, or both.

The default messages provide a consistent pattern: they state the length requirement and show how close the user is to meeting it.

Custom messages

A custom message in the character count is supported and can be used when a product or application-specific message or term is required, e.g., "registry" or "workspace".

Error validation

For error validation recommendations, refer to the Form patterns documentation.

How to use this component

There are two ways to use <i80-text-input>:

• the field: give the element a label attribute and it renders the <input> control, with label, helper text, and error messaging (in a wrapping container).
• the base control: leave the label out and write your own <input> inside the element, which is kept as it is.

We recommend using the field as it provides built-in accessibility functionality. Use the base control if needing to achieve custom layouts or for special use cases not covered by the field.

The field

The basic invocation requires a label: the label attribute. This creates:

• a <label> element with a for attribute automatically associated with the input ID attribute.
• a <input type="text"> control with an automatically generated ID attribute.

<i80-text-input label="Cluster name" name="demo-cluster-name"></i80-text-input>

Input value

Pass a value to pre-populate the input.

<i80-text-input label="Cluster name" name="demo-cluster-name" value="my-cluster-1234"></i80-text-input>

Type

Pass a type to change the type of input.

<i80-text-input label="Email" type="email" name="demo-email" value="janedoe@email.com"></i80-text-input>
<i80-text-input label="Date of birth" type="date" name="demo-birthday"></i80-text-input>

Helper text

You can add extra information to the field using the helper-text attribute. When helper text is added, the component automatically adds an aria-describedby attribute to the input control, associating it with the automatically generated ID of the helper text element.

<i80-text-input label="AWS Account ID" helper-text="Copy this ID to your AWS Resource Access Manager to initiate the resource share." name="demo-aws-account-id" value="036140285924"></i80-text-input>

Required vs. optional

Use the required and optional attributes to add a visual indication that the field is "required" or "optional".

<i80-text-input label="AWS Account ID" helper-text="Copy this ID to your AWS Resource Access Manager to initiate the resource share." name="demo-aws-account-id" required></i80-text-input>
<i80-text-input label="AWS Account ID" helper-text="Copy this ID to your AWS Resource Access Manager to initiate the resource share." name="demo-aws-account-id" optional></i80-text-input>

Validation

To indicate a field is invalid, set the error attribute to the message: it shows the error and marks the control invalid.

<i80-text-input label="Email" type="email" name="demo-email" value="jane.doe@.com" error="The provided email is not valid."></i80-text-input>

Custom control ID

If needing a custom ID for the control instead of the one automatically generated by the component, write the <input> yourself inside the element with that id.

In this case all the internal references (id/for/aria-describedby) between the different parts of the field are still automatically generated and will use the custom ID provided.

<i80-text-input label="AWS Account ID" helper-text="Copy this ID to your AWS Resource Access Manager to initiate the resource share.">
  <input type="text" name="demo-aws-account-id" id="my-control">
</i80-text-input>

HTML native attributes

The element passes name, value, placeholder, autocomplete, minlength, maxlength, pattern, min, max, step, inputmode, list and form on to the <input> it creates. For any other native behavior, write the <input> yourself inside the element and it is kept as it is, with all its attributes.

<i80-text-input label="Password">
  <input type="password" name="demo-user-password" placeholder="Insert your password here" minlength="4" maxlength="64">
</i80-text-input>

Custom width

By default, the input control width is set to fill the parent container, with the exception of "date" and "time" input types.

Pass a custom width for the control using the width attribute.

<i80-text-input label="Filter the list:" type="search" name="demo-filter" placeholder="Search clusters" width="200px"></i80-text-input>

Password

By default, password fields render with a button allowing users to toggle between visible and obfuscated input content.

<i80-text-input label="Password" type="password" name="demo-password" value="1234567890"></i80-text-input>

You can remove the visibility toggle button by adding the no-visibility-toggle attribute.

<i80-text-input label="Password" type="password" name="demo-password" value="1234567890" no-visibility-toggle></i80-text-input>

The base control

The base control is intended for rare cases where the field can’t be used and a custom implementation is needed. Most of the details for the field also apply to it, but see the Component API for more details.

Write the <input> inside the element with its own type and an aria-label.

<i80-text-input>
  <input type="email" name="demo-email" value="janedoe@email.com" placeholder="eg. name.surname@email.com" aria-label="User email" required>
</i80-text-input>

Attributes

<i80-text-input> renders this component. Everything it understands:

The tag keeps any native element you write inside it, so a server-rendered form, link or button works as it is. See Web Components for loading i80.js and the reference for these examples running.

Anatomy

States

For general content recommendations, refer to our Primitives documentation.

Conformance rating

A labelled field

An <i80-text-input> with a label is conformant when used as directed, and is what we recommend by default. The label is a real <label for> pointing at the <input>, and the helper-text and error attributes are linked to it with aria-describedby, so a screen reader reads the name, the hint and the error together.

A field without a label

A field is not conformant until it has an accessible name. If you leave the label attribute off — because the name is already in a table header or a heading nearby — put an aria-label on the element instead, or write your own <label for="…"> and <input> inside the tag; the element keeps the <input> you wrote and links the two.

Known issues

The helper text and the error are announced through aria-describedby, and a screen reader reads only their text. A link inside them is not announced as a link, so a keyboard user has no way to reach it from the announcement. Put links in the surrounding page content rather than in a label, helper text or error message.

Applicable WCAG Success Criteria

This section is for reference only, some descriptions have been truncated for brevity. This component intends to conform to the following WCAG Success Criteria:

Support

If any accessibility issues have been found within this component, let us know by submitting an issue.

0.1.0

Første i80-version (fork af upstream, se core/UPSTREAM.md).