Lumeo

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.

Value:

This will be your public display name.

Enter a valid promo code to receive a discount.

0/60
0 of 20 chars
$
USD

Type="number" swaps the browser's native spinner for themed vertical ▲▼ steppers. min/max/step are plain HTML attributes — the buttons clamp and disable at the same bounds native ArrowUp/ArrowDown already respects. Set ShowStepButtons="false" for a bare number field with no steppers (native spinners stay hidden either way).

Pick a size to see the height change live.

Keyboard Interactions

Key Action
TabMoves focus into or out of the input field.
EscapeClears the input value when a clearable behavior is implemented.
EnterSubmits 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

API Reference

Input

  • Textarea — Use for multi-line text input like comments or descriptions.
  • OtpInput — Specialized input for one-time password or verification codes.
  • Select — Use when the input value must come from a predefined list.
  • Form — Wraps inputs with validation, labels, and error messages.