Input
Displays a form input field or a component that looks like an input field.
Default
A simple text input.
UpdateOn Behavior
Control when the bound value is updated — on each keystroke (Input) or when the field loses focus (Change).
Value:
Value:
Optimized for Performance & Best Typing Experience
By default, CurrencyInput uses UpdateOn="Change" for better performance and UX.
The displayed value is automatically formatted based on the Currency and Culture parameters.
Benefits:
- Better typing UX: No interruptions while typing — validation tooltips won't get in your way
- Better performance: Value updates and validation only run when you tab away (blur)
- Fewer re-renders: Your bound value updates once on blur, not on every keystroke
UpdateOn Modes:
UpdateOn="Change"
→ Updates on blur (default, recommended)UpdateOn="Input"
→ Updates on every keystroke
Tip: Use UpdateOn="Input" only when you need real-time updates (e.g., live total calculation, instant feedback), or when targeting WebAssembly where interactivity is fully client-side.
Input Types
Various HTML input types for different data scenarios.
File
File inputs allow users to select one or multiple files.
Disabled
Disabled inputs cannot be interacted with.
Required
Mark inputs as required for form validation.
With Label
Pair inputs with descriptive labels.
Accessibility (ARIA)
Enhance accessibility with ARIA attributes.
Type keywords to search the documentation.
Please enter a valid email address.
Two-Way Binding
Two-way data binding: bind to a C# property with the bind-Value syntax.
Value:
Custom Styling
Apply custom CSS classes to customize the appearance.
Validation with EditContext
Automatic validation error display using EditContext and Data Annotations. Shows native browser tooltips, error styling, and inline messages.
What happens when you submit with errors:
- All invalid fields get red border/ring styling and inline error messages
- First invalid field (Username) also gets:
- Native browser tooltip with error message
- Auto-focus (cursor ready to type)
- Fix the first error and submit again → Next error gets tooltip and focus
- This prevents overwhelming users with multiple tooltips at once
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| Type | InputType | Text | HTML input type. Options: Text, Email, Password, Number, Date, File, Search, Tel, Url, Time. |
| Value | string? | null | Current value. Use @bind-Value for two-way binding. |
| Placeholder | string? | null | Placeholder text shown when input is empty. |
| Disabled | bool | false | Disables the input when true. |
| Required | bool | false | Marks the input as required for native form validation. |
| UpdateOn | InputUpdateMode | Input | When to update the bound value. Options: Input (every keystroke), Change (on blur). |
| ShowValidationError | bool | false | Shows browser native validation tooltip on invalid state. |
| AriaLabel | string? | null | ARIA label for accessibility when no visible label exists. |
| AriaDescribedBy | string? | null | ID of element that describes this input. |
| AriaInvalid | bool | false | Marks the input as invalid for screen readers. |
| Class | string? | null | Additional CSS classes appended to the input element. |