Input
Displays a form input field.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Input />
When to Use
- Collect single-line text input such as names, emails, or search queries.
- Build form fields for login, registration, or profile editing flows.
- Pair with prefix/suffix slots for currency inputs, search bars, or URL fields.
For validation, label, and helper text, wrap this input in
<FormField>.
See Form › Validation Pattern.
Value:
This will be your public display name.
Enter a valid promo code to receive a discount.
0/60
0 of 20 chars
$
USD
Pick a size to see the height change live.
Keyboard Interactions
| Key | Action |
|---|---|
| Tab | Moves focus into or out of the input field. |
| Escape | Clears the input value when a clearable behavior is implemented. |
| Enter | Submits the parent form when the input is inside a form element. |
Parameter Coverage
Every Lumeo.Size value plus the key bool parameters demoed exhaustively.
Size
Xs
Sm
Md
Lg
Xl
Xxl
Xxs
Disabled
Disabled = false
Disabled = true
Clearable
Clearable = false
Clearable = true
Invalid
Invalid = false
Invalid = true
Invalid email
API Reference
Input
| Property | Type | Default | Description |
|---|---|---|---|
| Value | string? | null | The current value of the input field. |
| OnInput | EventCallback<ChangeEventArgs> | — | Callback invoked on every keystroke as the value changes. |
| Prefix | RenderFragment? | — | Content rendered before the input. |
| Suffix | RenderFragment? | — | Content rendered after the input. |
| ValueChanged | EventCallback<string?> | — | Two-way binding callback; fires when the value changes. |
| Size | InputSize | Default | Control height. Values: Sm, Default, Lg. |
| Disabled | bool | false | Disables user interaction and applies disabled styling. |
| Clearable | bool | false | Shows an inline clear button when the value is non-empty. |
| OnClear | EventCallback | — | Invoked when the clear button is clicked. |
| Required | bool | false | Marks the field as required; forwarded to FormField when nested. |
| Invalid | bool | false | Applies a destructive ring to indicate a validation error. |
| ErrorText | string? | null | Error message shown below the field when Invalid is true (standalone, not inside FormField). |
| HelperText | string? | null | Help text shown below the field when there is no error (standalone, not inside FormField). |
| Label | string? | null | Inline label rendered above the input (standalone, not inside FormField). |
| Name | string? | null | HTML name attribute for form identification and EditForm binding. |
| FormField | FormFieldContext? | null | Cascaded context from a parent FormField. Drives Invalid, Required, and error display automatically. |