Input

The catnip-input component is a flexible form field designed for text entry, password masking, 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 uses a visible row of * characters while hidden, implemented with type="text" plus script so the mask matches design (not the browser’s native disc bullets).

Trade-offs you should know:

• Autofill and password managers often expect a real type="password" field; behaviour may be degraded or inconsistent.
• Paste, IME composition, undo, and some platform edits use input types that the mask logic handles less directly than plain typing—always test your critical flows in target browsers.
• Toggling visibility switches to the real cleartext value in the same control; ensure your product’s security review is comfortable with that pattern.

If you need maximum compatibility with browser password tooling, consider whether a native type="password" field is a better fit than this component’s masked mode.

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 id, or respects your id 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 status styling (border color, focus ring, and supporting text color).

• 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.