Input Component
Displays a form input field or a component that looks like an input field.
Default
A simple text input with placeholder.
Optimized for Performance & Best Typing Experience
By default, Input uses UpdateOn="Change" for better performance and UX.
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 character counter, instant search), or if you're targeting WebAssembly mode where interactivity will be fully handled in client-side.
Input Types
Different HTML5 input types with optimized keyboards and validation.
File
File upload input with enhanced pseudo-selector styling (file:border-0, file:bg-transparent, file:text-sm, file:font-medium).
File inputs now have improved styling using file: pseudo-selectors.
Disabled
Input with disabled state.
Required
Input with HTML5 required validation.
With Label
Inputs with labels and helper text.
We'll never share your email with anyone else.
Must be at least 8 characters.
Accessibility (ARIA)
Inputs with ARIA attributes for screen readers.
Your username must be unique and 3-20 characters.
Please enter a valid email address. Note the red border applied via aria-invalid.
Two-Way Binding
Demonstrating real-time value updates using Value and ValueChanged.
This example uses UpdateOn=InputUpdadeMode.Input which will updates the value on every keystroke using Value and ValueChanged parameters.
Current value:
(empty)
Custom Styling
Override styles with the Class parameter.
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
Type
Type: InputType
The type of input. Default: Text
Value
Type: string?
The current value of the input. Supports two-way binding with @bind-Value.
Placeholder
Type: string?
Placeholder text shown when input is empty.
Disabled
Type: bool
Whether the input is disabled. Default: false
Required
Type: bool
Whether the input is required for form validation. Default: false
ARIA Attributes
AriaLabel,
AriaDescribedBy,
AriaInvalid for accessibility.