Text Input

Commonly used text input component.

Installation

npx wdc add input

Examples

Basic

Standard input fields with labels.

Disabled

With Icons

Add icons or text as prefix/suffix. Padding adjusts automatically.

Username

Amount

USD

Validation

Visual feedback for error and success states.

Please enter a valid email.

Username

Looks good!

Password

Built-in visibility toggle for password fields.

Password

Login Form

Welcome back

Enter your email to sign in to your account

Don't have an account? Sign up

API Reference

Input	Type	Default	Description
label	string	''	Text label displayed above the input.
type	'text' \| 'email' \| 'password' \| 'number'	'text'	HTML input type.
placeholder	string	''	Placeholder text.
error	string \| null	null	Error message text. Changes border color to red.
success	boolean	false	If true, changes border color to green.
hint	string \| null	null	Helper text displayed below the input.
size	'sm' \| 'default' \| 'lg'	'default'	Controls the height and font size.

check_circle

SEO & Accessibility

Using [id] on the input and [for] on the label ensures screen readers associate the label correctly. The aria-invalid and aria-describedby attributes help accessibility tools announce errors automatically.