Input

The catnip-input component is a flexible form field designed for text entry, passwords, and multiline paragraphs. For dates, use Date Input. For phone numbers with a country-code picker, use Phone Input. For multi-value tag entry, use Chip Input.

Types (catnip-input)

Text & Email (type="text" | "email")

Use the default text type for standard single-line data entry. Use email when you need mobile browsers to show an email-optimized keyboard.

Password (type="password")

Use for sensitive text entry. The control is a native type="password" input, so the browser masks the value with its own characters and password managers, autofill, screen readers, and mobile keyboards treat it as a secure field.

• The trailing eye button toggles visibility by switching the control to type="text" and back. It has a localized accessible name that reflects the current state.
• Set autocomplete to current-password for sign-in or new-password for sign-up and password changes so password managers fill or suggest the right value.
• The mask character comes from the browser and cannot be changed to *.

Textarea (type="textarea")

Use for multiline text entries (like comments or descriptions). You can define the default height via the rows prop, or let it default based on the size (s = 3, m = 5, l = 7). You can also lock the resize handle using resizable="false".

Composition

Labels

Use the label prop or the label slot on catnip-input. Optional label.action / label.suffix slots mirror the field-label patterns (for example a “Learn more” link). The component wires for / id automatically when you omit inputId, or respects your inputId when you set it explicitly for stable anchors.

For custom controls outside catnip-input, use standalone Field Label and wire html-for / id yourself.

There is no color prop; change appearance by theming tokens.

Supporting text

Do not manually place <catnip-field-supporting-text> under the field. Pass supporting-text. The input sets aria-describedby and intent styling.

Intents and Status

The intent prop controls the semantic border and supporting text color. Warning and success retain their semantic border when focused and use the standard primary focus ring. Danger uses the danger focus ring.

• Neutral (default): Standard input state.
• Warning: Warn about the current value (e.g. weak password).
• Danger: Validation errors. Sets aria-invalid="true" on the native control.
• Success: Confirm a valid state.

Best Practices

• Icon actions: If the right icon is clickable, set right-icon-clickable="true" and provide right-icon-button-aria-label (except password, which sets labels for the visibility toggle).
• Spacing: Avoid ad-hoc margins on inputs; use your layout’s flex or grid gaps between fields.