Healthy

Preview

Storybook failed to load. Please connect to the VPN to access.

Anatomy

Code


                                                        
                                                        
                                                            <usln-text-input
                                                            size="medium"
                                                            theme="light"
                                                            label="Label"
                                                            value="Things typed in input"
                                                            status="default"
                                                            left-icon="folder"
                                                            is-disabled="false"
                                                            is-required="true"
                                                        >
                                                        </usln-text-input>

Medium sized text input that has a label on the left and is required

Guidelines

Text input is a component that can be used in forms, modals, or patterns. This component exists both in the Editor and Portal (e.g.: for naming a guide), but not in the Assistant.

We have 3 different types of text inputs which can be used in several cases:

Text input

The text input can be used only when a user needs to enter or edit a single line of text. User can enter any combination of letters, numbers, or symbols.

Password input

Password input is a sub-variant of text input. It can be used to collect private data, the characters will be hidden when a user will enter a password.

Also we can mask secret fields (e.g.: API key fields), leaving only the first 4 characters visible.

Name/Title input

This special type of text input is only used for giving a name or a title to a content item in the Userlane Suite. It employs a pen (edit) icon on the right inside the field. (e.g., the field "Announcement name" in the Portal).

Content guidelines

The label text above the input area should be short and concise.

Use * to indicate required fields. But only if there's a mix between required and optional fields. If all fields are required, we do not use the *.

Sometimes you can add an icon "info" next to the text input to display a tooltip and give more informations to users.

Optional placeholder text

The placeholder cannot be used instead of label.

We generally discourage its usage, and shouldn’t be used for information necessary to fill in the field.

Instead of placeholder text, consider helper text, or even info icon + tooltip.

If used, it should be still displayed on field focus, and hidden on typing.

Behaviours

Keyboard interaction

Using tab navigation to move between fields should be supported.

Validation

Success state

The success state is displayed when the entered content is the correct format (e.g., email address) or the correct data (e.g., login credentials).

Error state

An error state is triggered if the format is incorrect, the data is invalid, or a required field is left empty.

When an error message is displayed, it should specify what is expected from the user.

Do's and Dont's

Do's

Use text inputs for a single line of text content

Provide a label to clearly state text field's purpose

Do not use placeholder text in lieu of a field label.

Dont's

Don't display generic error messages, such as "You made a mistake" or "There's an error"

Don't use * to indicate required fields, if all the fields are required.

Variants

Default

The generic text field for most cases where a single line of text input is required. This version exists in sizes S, M, and L.

Password

Used for entering sensitive data, like password. This version exists in sizes S, M, and L.

Character counter

Character counter is an optional feature of the text input component, used to limit the length of the content users enter. It should be used with caution, and not for any sort of personal data input (e.g., we never limit the length of name fields). See the relevant section in Text area for specific guidelines on how character limits work.

This is an older variant and in general we aim to reduce the use of tooltips in forms - labels and text should provide users with enough information to fill them our successfully. If you decide to use this variant, please remember that the tooltip:

can be used only for non-essential information,

where feasible, should be substituted with Userlane Suite’s Tooltip.

Name / Title

Used to enter or edit a content item's name or title. This version exists only in size L.

Text input