Input Text

The Input Text component provides a customizable text input field with support for multiline, password, validation, and rich accessibility features.

Basic usage

The Input Text component offers three variants through different selectors:

• <lmn-input-text>: Standard single-line input
• <lmn-input-text-multiline>: Multiline textarea
• <lmn-input-text-password>: Password input with visibility toggle

Component anatomy

Label and Markers

Configure input labeling using:

• Label content projection
• requiredMarker Input for required fields
• disabledMarker Input for disabled state
• readonlyMarker Input for readonly state
• languageCode and language Inputs for language indication

Required state

Disabled state

Read-only state

Language indication

Content Control

Manage input behavior with:

• placeholder Input for placeholder text
• autoComplete Input for autocomplete behavior
• maxLength for character limit
• Character counter display
• Spell check configuration
• Clear button option

Prefilled value

Placeholder

Maximum length

Hiding the Clear button

Validation States

Handle validation through:

• Required state
• Error messages
• Alert messages
• Helper text
• Visual error indicators
• Dynamic validator messages

Required state

Alert message

Error message

Helper text

Interactive States

Support for multiple states:

• Focus state with visual feedback
• Disabled state with optional reason tooltip
• Read-only mode
• Active state
• Filled state indication

Contextual Actions

Add supplementary actions:

• Clear button (optional)
• Password visibility toggle
• Custom action button
• Action tooltips
• Action ARIA labels

Additional contextual elements

Input text enables developers to customize even further the contextual elements, both at the start and end edges of the input field:

• Custom icons
• Completely custom elements (this can include again also icons and buttons)

Custom icons

Custom elements

Negative Theme

Enable dark theme using the negative Input, affecting:

• Background colors
• Text colors
• Border colors
• Icon colors
• Focus indicators

Accessibility

ARIA Support

Comprehensive ARIA implementation:

• Proper input roles
• Label relationships
• Error/alert announcements
• Helper text connections
• State descriptions

Keyboard Navigation

Full keyboard support:

• Tab navigation
• Focus management
• Clear action support
• Password visibility toggle
• Custom action handling

Visual Feedback

Clear state indication:

• Focus rings
• Error states
• Required fields
• Disabled state
• Read-only state

Best Practices for Developers

1. Label Usage DEMO HERE

2. Validation Implementation DEMO HERE

3. State Management DEMO HERE