Input

catnip-input

Props

Shared field behaviour with catnip-input-date, catnip-input-number, catnip-input-phone, and catnip-input-chip is summarised on Inputs overview. The sections below are the full catnip-input reference, grouped by what you are trying to configure.

Value & form

Prop	Type	Default	Options	Description
modelValue	string | number	""	—	Value of the input; model-value in HTML / .modelValue in frameworks.
id	string	""	—	DOM id for the input. If omitted, an id is generated.
name	string	""	—	Native name for form submission.
required	boolean	false	—	Native required and label marker.

Field presentation

Prop	Type	Default	Options	Description
label	string	""	—	Visible field label when the label slot is empty.
optional	boolean	false	—	When true and not required, shows the localized optional hint.
optionalText	string	""	—	Overrides the localized optional hint (HTML: optional-text).
info	string	""	—	Info tooltip beside the label; when non-empty, it wins over the label.suffix slot.
alignment	"left" | "center" | "right"	"left"	left, center, right	Horizontal alignment of the field label block.
requiredMarker	string	"*"	—	Visual marker for required fields (HTML: required-marker).
requiredScreenReaderText	string	""	—	Optional screen-reader supplement; it does not replace required on the control (HTML: required-screen-reader-text).
supportingText	SupportingTextProp	""	—	One or more helper or validation messages. Each object requires text; intent accepts neutral, danger, warning, or success, and icon accepts a Catnip icon name. See supporting-text examples.

Input behaviour

Prop	Type	Default	Options	Description
type	string	"text"	text, email, password, textarea	Input type.
placeholder	string	""	—	Placeholder when empty.
autocomplete	string	"on"	—	Native autocomplete.
autofocus	boolean	false	—	Autofocus (use sparingly).
spellcheck	boolean	false	—	Native spellcheck.
maxlength	number	undefined	—	Max length.
pattern	string	undefined	—	Validation pattern.
rows	number	undefined	—	For textarea; default rows depend on size.
resizable	boolean	true	—	For textarea; vertical resize.

State & validation

Prop	Type	Default	Options	Description
size	"s" | "m" | "l"	"m"	s, m, l	Dimensions and typography.
intent	"neutral" | "danger" | "warning" | "success"	"neutral"	neutral, danger, warning, success	Semantic state applied to field and supporting-text styling; danger sets aria-invalid on the input.
disabled	boolean	false	—	Disables the control.
readonly	boolean	false	—	Read-only control.
ariaLabel	string	""	—	aria-label when there is no visible label.
ariaDescribedby	string	""	—	Extra id values merged into aria-describedby alongside generated supporting-text ids.

Adornments & actions

Prop	Type	Default	Options	Description
leftIcon	CatnipIconName | ""	""	CatnipIconName	Leading icon.
rightIcon	CatnipIconName | ""	""	CatnipIconName	Trailing icon (hidden while showClearButton is active and the value is non-empty).
rightIconClickable	boolean	false	—	Makes the trailing icon a button; requires rightIconButtonAriaLabel when not password.
rightIconButtonAriaLabel	string	""	—	Accessible label for the trailing icon button.
showClearButton	boolean	false	—	For text / email, shows a clear control while the value is non-empty (not password).
clearButtonAriaLabel	string	""	—	Accessible label for clear; defaults to bundled input.clear.

Advanced

Prop	Type	Default	Options	Description
hideLabel	boolean	false	—	Hides the built-in label row.
testSelectors	TestSelectorsProp	See Test Selectors	—	Overrides stable data-test values.

Events

Name	Payload	Description
update:modelValue	value: string | number	Value changed.
right-icon-click	—	Generic trailing icon button (not password toggle or clear).

Slots

Label row

Name	Description
label	Custom label content; falls back to label prop.
label.action	Trailing action in the label row (e.g. link).
label.suffix	Custom label suffix (suffix slot); used only when info is empty.

Input adornments

Name	Description
leftIconSlot	Custom leading icon.
rightIconSlot	Custom trailing icon.

See Component API — Slots.

Test selectors

Attribute	Default	Applies to
root	catnip-input	Single-line: bordered wrapper. Textarea: use control (same node as the field).
control	catnip-input-control	The native <input> or <textarea>.
leftAdornment	catnip-input-left-adornment	Leading icon region (when present).
clearButton	catnip-input-clear	Clear control (when showClearButton and value non-empty).
rightButton	catnip-input-right-button	Right icon button (password toggle or rightIconClickable).
supportingText	catnip-input-supporting-text	Supporting message below the field.

For Date Input (catnip-input-date), see Date Input — Specs. For Number Input (catnip-input-number), see Number Input — Specs. For Phone Input (catnip-input-phone), see Phone Input — Specs. For Chip Input (catnip-input-chip), see Chip Input — Specs.