# Input

Source: https://lumeo.nativ.sh/components/input

# Input

Displays a form input field.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## 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](/components/form#validation-pattern).

Preview Code

Default

Preview Code

With Binding

Value:

Preview Code

File Input

Preview Code

Disabled

Preview Code

With Label

Email

Password

Preview Code

With Label and Help Text

Username

This will be your public display name.

Promo Code

Enter a valid promo code to receive a discount.

Preview Code

Input with Icon

Preview Code

Input with Button

 Subscribe

 Invite

Preview Code

Character Counter (ShowCount + MaxLength)

0/60

0 of 20 chars

Preview Code

Prefix & Suffix

$

USD

Preview Code

Size — interactive preview

Pick a size to see the height change live.

Sm Default Lg

## 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.

## Related Components

-   [Textarea](/components/textarea) — Use for multi-line text input like comments or descriptions.
-   [OtpInput](/components/otp-input) — Specialized input for one-time password or verification codes.
-   [Select](/components/select) — Use when the input value must come from a predefined list.
-   [Form](/components/form) — Wraps inputs with validation, labels, and error messages.