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 (native masking with a show/hide toggle), or textarea (with configurable rows).
• Semantic Intents: Apply neutral, warning, danger, or success states to adjust borders and supporting text colors. Warning and success use the standard primary focus ring; danger uses the danger focus ring.
• 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); when a right icon is also configured, both controls remain 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: Renders a native type="password" control, so browsers, password managers, screen readers, and mobile keyboards treat it as a secure field. The visibility toggle switches the control to type="text" and back; see Input — Guidelines — Password.