Input

Single-line text form control with label, validation, icons, masking, and debounced input.

HTML tag: c-e95989f31e5f940b2a7bf7661c35d65ad

When to use

• single-line text, number, email, or password
• search box with clear button
• masked or validated text field

Props

Prop	Type	Default	Description
type	string	text
value	string
placeholder	string
label	string
status	string	default
required	boolean
disabled	boolean
readonly	boolean
clearable	boolean
input_id	string
helper_text	string
error_text	string
reveal_password	boolean
max_length	number
min_length	number
pattern	string
autocomplete	string	off
name	string
debounce_ms	number	150
prefix_icon	string
suffix	string
size	string	md
density	string	comfortable
tone	string	neutral
aria_label	string
aria_describedby	string
select_on_focus	boolean
commit_on_enter	boolean	true
clear_on_escape	boolean
prefix_clickable	boolean
suffix_clickable	boolean
step	string	any
min	string
max	string
spellcheck	boolean
autocapitalize	string	off
autocorrect	string	off
mask_pattern	string
mask_placeholder	string	_
mask_autofix	boolean	true
async_validator_id	string
icon_loading	boolean
show_counter	boolean	true
label_position	string	stacked
suffix_icon	string

Rules

• Bind .value as string; set .type for text, password, number, email, etc.
• input-changed fires during edit (respect debounce_ms); value-committed on commit (blur/enter per commit_on_enter).
• Use status/error_text/helper_text or validated event for errors.
• prefix_icon/suffix_icon use mi: prefix like ab-icon.

Events

Event	Detail
input-changed	value: string
value-committed	value: string
validated	valid: boolean, errors: array
focus
blur
cleared
prefix-click	originalEvent: object
suffix-click	originalEvent: object
reveal-toggle	revealed: boolean

Methods

Signature	Description
focus()
blur()
select()
setValue(value: string, options: object)
validate()
clear()

What to avoid

Do not use for boolean (ab-checkbox), option lists (ab-select/ab-radio-group), or dates (ab-date-field). Do not use for multi-line prose (ab-textarea).

Example

<c-e95989f31e5f940b2a7bf7661c35d65ad .label=${'Email'} .type=${'email'} .value=${email} .required=${true} @input-changed=${e => email = e.detail.value} @value-committed=${onCommit}></c-e95989f31e5f940b2a7bf7661c35d65ad>