Input

The catnip-input component provides a versatile, highly configurable form field for standard text entry, passwords, and multiline paragraphs. Shared label and supporting-text APIs are summarised on Inputs overview.

Overview

The catnip-input component renders robust native <input> or <textarea> elements with built-in accessibility handling. Key features include:

• Input modes: Use text (or email), password (custom * masking with documented trade-offs for autofill and edge-case editing), or textarea (with configurable rows).
• Semantic Intents: Apply neutral, warning, danger, or success states to automatically adjust borders, focus rings, and supporting text colors.
• Supporting Text: Built-in integration with the internal FieldSupportingText primitive to provide descriptions, helper text, or error messages directly linked via aria-describedby.
• Flexible Icons: Slot in leading or trailing icons, and optionally make the right icon an interactive, accessible button. For single-line text / email, show-clear-button adds a trailing clear control while the value is non-empty (uses bundled input.clear unless clear-button-aria-label is set); it hides the plain rightIcon while visible.

Live example

Accessibility

• IDs & Labeling: Automatically generates fallback id attributes if omitted, ensuring the native control is always addressable. Provides robust aria-describedby linkage to supporting text.
• Invalid State: When intent="danger" is set, aria-invalid="true" is automatically applied to the underlying input for assistive technology.
• Interactive Icons: If the generic right icon is clickable (rightIconClickable), a valid rightIconButtonAriaLabel is strictly required. The show-clear-button trailing control uses clear-button-aria-label or the default input.clear label.
• Password masking: Uses manual JS masking on a type="text" input so the visible mask is *; see Input — Guidelines — Password for autofill and editing caveats.