Input (text)

Since 2.6.0 Form-ready since 2.6.0

Show deprecated version

Guidelines

Guidelines

An input field is a user interface element that allows users to enter and edit text, numbers and symbols. It’s commonly used in forms, search bars, and other areas where data input is required.

1. Label
2. Required indicator
3. Placeholder
4. Slot-end
5. Slot-start
6. Container
7. Helper or feedback text
8. Counter

Options

• Label: See form field.
• Slot options: Add optional elements at the end and/or start of the input field, e.g. an icon, a button or a text option. We typically use slots for additional indications, options or information like a visibility toggle in a password field.
• Placeholder: Use a placeholder to provide a hint about what to enter or additional relevant context while the input field is empty. We typically use a placeholder when the label is not visible or we need to provide additional context.
• Helper text: See form field.
• Counter: See form field.
• Feedback text: See form field.

Behavior in context

• Validation: See validation.
• Interaction: Clicking in the container enables the editing of the field.
• Text truncation: The text in an input field is cut off with the length of the container.
• Alignment: Inputs are always aligned to the left, while right alignment is reserved exclusively for number fields.

States

The input field has five states: default, focused, hover, disabled and read-only. In the read-only state, the input field is displayed without offering any user interaction.

Dos and Don’ts

• Do use helper text to guide users through the input process
• Do use feedback text to inform users about the status of their input
• Do ensure that the width of the input field is appropriate for the expected content
• Don’t overcrowd the input field with too many elements
• Don’t use placeholders as a substitute for labels

Related patterns

• Form field
• Validation
• Layout
• Number input
• Date input

Development

Development

Examples

Basic

PreviewAngularReactVueJavaScript

Disabled

PreviewAngularReactVueJavaScript

Label

PreviewAngularReactVueJavaScript

Pattern

PreviewAngularReactVueJavaScript

Readonly

PreviewAngularReactVueJavaScript

Types

PreviewAngularReactVueJavaScript

Validation

PreviewAngularReactVueJavaScript

Slots

PreviewAngularReactVueJavaScript

API

Properties

Name

Description and specifications

allowedCharactersPattern

The allowed characters pattern for the text field.

Attribute:

allowed-characters-pattern

Type:

string ｜ undefined

disabled

Specifies whether the text field is disabled.

Attribute:

disabled

Type:

boolean

Default:

false

helperText

The helper text for the text field.

Attribute:

helper-text

Type:

string ｜ undefined

infoText

The info text for the text field.

Attribute:

info-text

Type:

string ｜ undefined

invalidText

The error text for the text field.

Attribute:

invalid-text

Type:

string ｜ undefined

label

The label for the text field.

Attribute:

label

Type:

string ｜ undefined

maxLength

The maximum length of the text field.

Attribute:

max-length

Type:

number ｜ undefined

minLength

The minimum length of the text field.

Attribute:

min-length

Type:

number ｜ undefined

name

The name of the text field.

Attribute:

name

Type:

string ｜ undefined

pattern

The pattern for the text field.

Attribute:

pattern

Type:

string ｜ undefined

placeholder

The placeholder text for the text field.

Attribute:

placeholder

Type:

string ｜ undefined

readonly

Specifies whether the text field is readonly.

Attribute:

readonly

Type:

boolean

Default:

false

required

Specifies whether the text field is required.

Attribute:

required

Type:

boolean

Default:

false

showTextAsTooltip

Specifies whether to show the text as a tooltip.

Attribute:

show-text-as-tooltip

Type:

boolean ｜ undefined

type

The type of the text field. Possible values are 'text', 'email', or 'password'.

Attribute:

type

Type:

"email" ｜ "password" ｜ "tel" ｜ "text" ｜ "url"

Default:

'text'

validText

The valid text for the text field.

Attribute:

valid-text

Type:

string ｜ undefined

value

The value of the text field.

Attribute:

value

Type:

string

Default:

''

warningText

The warning text for the text field.

Attribute:

warning-text

Type:

string ｜ undefined

Events

Name

Description and specifications

ixBlur

Event emitted when the text field loses focus.

Detail:

void

validityStateChange

Event emitted when the validity state of the text field changes.

Detail:

ValidityState

valueChange

Event emitted when the value of the text field changes.

Detail:

string

Slots

Name

Description and specifications

end

Element will be displayed at the end of the input

start

Element will be displayed at the start of the input