Input

An enhanced base input built on the native <input> element.

Basic Usage

Basic usage

Example

Accessible Name (label)

label (accessible name)

Example

label serves as the accessible name (aria-label) source for the input, announced by screen readers. When label is not set, it falls back to placeholder → built-in text "输入框"; once set (e.g. "Login email"), it overrides the fallback chain.

Types

type

Example

type is passed through to the native input type, supporting text / password / number / email, etc.

Password Visibility Toggle

show-password

Example

With show-password and type="password", an eye button is rendered on the right side of the input; clicking toggles between plaintext and masked text. The button has an aria-label (locale text), aria-pressed, and a focus ring when focused.

Clearable

clearable

Example

When there is content and clearable is set, a clear button is shown; clicking clears the value, refocuses, and dispatches oas-clear.

Disabled & Readonly

disabled / readonly

Example

Addons

addon-before / addon-after

Example

addon-before / addon-after render external addon text blocks (e.g. units, domains) outside the input, going through dedicated ::part(prepend) / ::part(append) parts; addons are greyed out when disabled.

Icons

prefix-icon / suffix-icon

Example

prefix-icon / suffix-icon accept icon names (from @oas-isui/icons iconRegistry) and inline-render decorative SVG icons.

Inline Affixes & Clear Together

prefix / suffix + clearable

Example

prefix / suffix are inline text inside the input and can coexist with clearable, icons, and addons without conflicts.

Character Count

show-count + maxlength

Example

show-count displays a character counter at the bottom-right of the input: with maxlength it shows current/maxlength, without it just the current length; maxlength is also passed through to the native input to limit input length. When the limit is exceeded, the counter number turns danger-colored.

Enter Submit Event

oas-enter

Example

Pressing Enter while typing (not an IME composition commit) dispatches oas-enter with detail: { value }.

Events

Input and clear events

Example

Listen to oas-input (while typing) and oas-clear (on clear):

API

Attributes

Attribute	Description	Type	Default
addon-after	Addon text block after the input	string	—
addon-before	Addon text block before the input	string	—
clearable	Clearable	boolean	—
disabled	Disabled	boolean	—
label	Accessible name (aria-label source; falls back to placeholder → built-in "输入框" when unset)	—	—
maxlength	Maximum input length (passed through to native maxlength)	string	—
placeholder	Placeholder text	string	—
prefix	Inline text before the input value	string	—
prefix-icon	Icon name for the leading icon	string	—
readonly	Readonly	boolean	—
show-count	Show character count (bottom-right; danger when over limit)	boolean	—
show-password	Password visibility toggle (renders an eye button when type="password")	boolean	—
suffix	Inline text after the input value	string	—
suffix-icon	Icon name for the trailing icon	string	—
type	Native input type	string	text
value	Value (controlled)	string	—

Events

Event	Description
oas-clear	Cleared by click, detail: { originalEvent }
oas-enter	Enter pressed (not IME composition), detail: { value }
oas-input	While typing, detail: { value }