@wdc-ui/ng

Examples

Input Fields

Basic form controls

Email Address *

Please enter a valid email address

Password

Must be at least 8 characters long

Amount

Login Form

Login form with input fields

Welcome back

Enter your email to sign in to your account

Don't have an account? Sign up

Installation

npx wdc add input

Code

<wdc-text-input
  [ngModel]="nameValue()"
  (ngModelChange)="nameValue.set($event)"
  label="Your Name"
  placeholder="Your Name"
>
</wdc-text-input>
<wdc-text-input
  [ngModel]="emailValue()"
  (ngModelChange)="emailValue.set($event)"
  label="Email Address"
  type="email"
  placeholder="Email Address"
>
</wdc-text-input>
<wdc-text-input
  [ngModel]="passwordValue()"
  (ngModelChange)="passwordValue.set($event)"
  label="Password"
  type="password"
  placeholder="Password"
>
</wdc-text-input>

API Reference

Input	Type	Default	Description
label	string	undefined	Label text for the input field.
type	'text' \| 'email' \| 'password' \| 'number' \| 'tel' \| 'url'	'text'	Type of input field.
placeholder	string	undefined	Placeholder text for the input field.
error	string \| null	null	Error message to display when input is invalid.
disabled	boolean	false	Whether the input field is disabled.
value	string	undefined	Value of the input field.