Github

Input

Inputs capture single-line text values with support for states and helper content.

Component variations

Basic Input

Standard input for short, single-line data entry

States

Contains: Default, Success, Error, Warning

Looks good
This field is required
Double-check this value

Leading Icon

Leading icon and optional trailing action icon

Trailing action

Trailing action with icon button.

Input Type

Supports text and password types

Optional & Disabled

Inputs can be marked optional or disabled

Optional

Character Limit

Inputs can show a character counter and enforce max length

0/20

Hint & Helper Text

Use hint for tooltips and helper text for guidance

Digits only

Usage Guidelines

Import

Import the input component in your module or component:

import-input.ts

Copy code

Basic Implementation

Here is a basic example of using the input component:

input-example.html

Copy code

Implementation with all available APIs

Here is an example of using the input component with all available APIs:

input-example.html

Copy code

Listening to Events

Handle changes, blur commits, and trailing action clicks:

input-events.html

Copy code

input-events.ts

Copy code

API Reference

Inputs

Property
Type
Default
Required
Description
label
string
-
No
Label text displayed above the input
placeholder
string
''
No
Placeholder text shown when input is empty
value
string
''
No
Current value of the input
type
'text' | 'password'
'text'
No
Input type
optional
boolean
false
No
Whether the input is optional
disabled
boolean
false
No
Whether the input is disabled
readOnly
boolean
false
No
Whether the input is read-only
state
'success' | 'error' | 'warning' | null
null
No
Visual state of the input
helperText
string
-
No
Helper text displayed below the input
hintText
string
-
No
Hint text shown in tooltip

Outputs

Event
Type
Description
valueChange
EventEmitter<string>
Emitted on every input change
valueCommit
EventEmitter<string>
Emitted when the input loses focus
trailingActionClick
EventEmitter<void>
Emitted when the trailing action icon is clicked
inputFocus
EventEmitter<void>
Emitted when the input receives focus

Best Practices

When to Use

  • Use Input when this pattern clearly supports the user task.
  • Use it to keep similar interactions consistent across the product.

When Not to Use

  • Avoid using Input when a simpler component communicates the same intent.
  • Avoid using it when the pattern introduces unnecessary interaction steps.

Design Guidelines

  • Use clear labels and concise placeholder text
  • Show helper text for validation or formatting guidance
  • Reserve error state for actionable validation feedback
  • Use trailing actions for contextual helpers like clear or show password
  • Set maxInputCount when input length is constrained
  • Do not rely solely on placeholder text to describe required input
  • Keep labels, helper text, and actions concise and easy to scan.
  • Use VD variants and states consistently for predictable behavior.
  • Ensure keyboard access and clear focus order for accessibility.

Component playground

Customize the input features in this section

Helper text

example.html

Copy code