wc-text-input

<wc-text-input>

Form-associated text input with built-in label, error, and help text.

A text input component with label, validation, and form association.

Basic

Simple text input with label.

Basic

Input Types

Different native input types.

Input Types

Help Text

Guidance text below the input.

Help Text

Error State

Input with error message displayed.

Error State

Required

Required field indicator.

Required

Disabled

Non-interactive disabled state.

Disabled

Prefix & Suffix Slots

Content before and after the input.

Prefix & Suffix Slots

https://$USD

Validation States

Multiple states side by side.

Validation States

API Reference

Properties

10

Attribute	Type	Default	Description
label	string	''	The visible label text for the input.
placeholder	string	''	Placeholder text shown when the input is empty.
value	string	''	The current value of the input.
type	'text' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'number'	'text'	The type of the native input element.
required	boolean	false	Whether the input is required for form submission.
disabled	boolean	false	Whether the input is disabled.
error	string	''	Error message to display. When set, the input enters an error state.
help-text	string	''	Help text displayed below the input for guidance.
name	string	''	The name of the input, used for form submission.
aria-label	string | null	null	Accessible name for screen readers, if different from the visible label.

Events

2

Name	Type	Description
wc-input	CustomEvent<{value: string}>	Dispatched on every keystroke as the user types.
wc-change	CustomEvent<{value: string}>	Dispatched when the input loses focus after its value changed.

Slots

3

Name	Description
prefix	Content rendered before the input (e.g., icon).
suffix	Content rendered after the input (e.g., icon or button).
help-text	Custom help text content (overrides the helpText property).

CSS Custom Properties

8

Property	Description
--wc-input-bg	Input background color.
--wc-input-color	Input text color.
--wc-input-border-color	Input border color.
--wc-input-border-radius	Input border radius.
--wc-input-font-family	Input font family.
--wc-input-focus-ring-color	Focus ring color.
--wc-input-error-color	Error state color.
--wc-input-label-color	Label text color.

CSS Parts

6

Part	Description
field	The outer field container.
label	The label element.
input-wrapper	The wrapper around prefix, input, and suffix.
input	The native input element.
help-text	The help text container.
error	The error message container.