Input
A versatile form input field that supports multiple types including text, email, password, and file uploads, with built-in validation states and accessible labeling.
Default
The default form of the
Input component for single-line text entry. It renders a standard text input with focus ring styling and placeholder support.With Label
Pair an
Input with a Label component using matching For and Id attributes for proper accessibility. Clicking the label will focus the input, which is essential for screen reader users and improves the click target area.Input Types
Use the
Type parameter to select the appropriate input mode. Available types include Text, Email, Password, Number, and Search, each providing specialized keyboard layouts on mobile devices and browser-native validation.File Input
Set
Type to InputType.File to render a styled file upload input. The component applies custom file: pseudo-selector styling for a consistent look across browsers, ensuring the file button text inherits the foreground color.Disabled
Set
Disabled to true to prevent user interaction. The input displays reduced opacity and a not-allowed cursor to clearly indicate its inactive state to all users.With Error
Set
AriaInvalid to true to apply destructive border and ring colors, signaling a validation error. Pair with a descriptive error message below the input and use AriaDescribedBy to associate the message for screen readers.Custom Variant
Use the
Class parameter to apply custom Tailwind CSS classes for project-specific styles such as gradients, custom border colors, or different border radii. This lets you extend the base input style without creating a new component.With Button
Compose an
Input alongside a Button in a flex container to create inline action patterns such as subscribe forms or search bars. This is a common real-world pattern for newsletter signups and quick-action forms.Update Timing
Control when
ValueChanged fires using UpdateTiming. The default is Immediate (fires on every keystroke, as shown in all examples above). OnChange fires only on blur or Enter — useful for fields where intermediate values shouldn't trigger side effects. Debounced fires after the user stops typing for DebounceInterval milliseconds (default 500ms) — ideal for search inputs.Programmatic Focus
Capture the component with
@ref and call FocusAsync() to move keyboard focus to the input — no JavaScript interop required. Useful for focusing a search field after navigation or directing the user to the first invalid field on submit.Login Form
A real-world login form composition using multiple
Input components with Label elements, validation states, and a submit button inside a Card. This demonstrates how inputs integrate into complete form layouts.Public Methods
Use a component reference (@ref) to call this method programmatically.
| Method | Returns | Description |
|---|---|---|
| FocusAsync() | ValueTask | Moves keyboard focus to the underlying input element. Call via @ref — no JS interop needed. |
The component also exposes a public Element property of type ElementReference that points at the underlying input element, for advanced JS interop scenarios.