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 label text when the label slot is empty.
optional	boolean	false	—	Shows optional hint on the label when not required.
optionalText	string	""	—	Overrides optional hint text (HTML: optional-text).
info	string	""	—	Info tooltip on the label (info wins over the label.suffix slot when both are set).
alignment	string	"left"	left, center, right	Label alignment.
requiredMarker	string	"*"	—	Visual required marker (HTML: required-marker).
requiredScreenReaderText	string	""	—	Supplemental screen-reader text for required fields (HTML: required-screen-reader-text).
supportingText	string | string[] | { text, intent?, icon? } | { text, intent?, icon? }[]	Message(s) below the field. See Inputs overview — Multiple supporting messages.

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	string	"m"	s, m, l	Dimensions and typography.
intent	string	"neutral"	neutral, warning, danger, success	Status styling; danger sets aria-invalid.
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 on the control (in addition to the generated supporting-text id when supportingText is set).

Adornments & actions

Prop	Type	Default	Options	Description
leftIcon	string	""	CatnipIconName	Leading icon.
rightIcon	string	""	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 when a parent field renders the label.
testSelectors	object	See Test Selectors	—	Overrides for data-test.

Events

Name	Payload	Description
update:modelValue	value: string | number	Value changed.
rightIconClick	—	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).
trailingButton	catnip-input-trailing-button	Trailing 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.