Default
Search
<Input Label="Default Input" Placeholder="Enter text..." @bind-Value="@_defaultValue" />Default
Search
<Input Label="Default Input" Placeholder="Enter text..." @bind-Value="@_defaultValue" />Success State
Username
Username is available!
<Input
Label="Username"
Type="InputType.Text"
Placeholder="username"
Status="InputStatus.Success"
Message="Username is available!"
IconRight="Lucide.Check"
/>Error State
Email
Please enter a valid email address
<Input
Label="Email"
Type="InputType.Email"
Placeholder="invalid-email"
Status="InputStatus.Error"
Message="Please enter a valid email address"
IconRight="Lucide.X"
/>Warning State
Password
Password is weak. Use uppercase, numbers, and symbols
<Input
Label="Password"
Type="InputType.Password"
Placeholder="••••••••"
Status="InputStatus.Warning"
Message="Password is weak. Use uppercase, numbers, and symbols"
ShowPasswordToggle="true"
/>Info State
Phone Number
International format recommended
<Input
Label="Phone Number"
Type="InputType.Text"
Placeholder="+62 812 3456 7890"
Status="InputStatus.Info"
Message="International format recommended"
IconLeft="Lucide.Phone"
/>Disabled State
ID Number
<Input
Label="ID Number"
Type="InputType.Text"
Value="1234567890"
Disabled="true"
IconLeft="Lucide.Lock"
/>Readonly State
Registered Date
<Input
Label="Registered Date"
Type="InputType.Text"
Value="2024-01-15"
Readonly="true"
/>Number Input
Age
<Input
Label="Age"
Type="InputType.Number"
Placeholder="Enter your age"
MinLength="1"
MaxLength="3"
IconLeft="Lucide.Calendar"
/>Date Input
Birth Date
*
<Input
Label="Birth Date"
Type="InputType.Date"
IconLeft="Lucide.CalendarDays"
Required="true"
/>Constraints & Events Demo
Input with Auto-Applied Constraints
StringLength(10, MinimumLength=3) auto-applies maxlength
Username
0 / 10
Current Length: 0 / 10
Event Log
No events logged yet...