Basic TextField
Status Variants
Multiline + Counter
With Adornments
USD
razor
<FodInput T="string" Label="Full name" Placeholder="Enter your name" />Inputs
Explore text input, textarea, and numeric input components from Fod.UIComponents. Inputs support validation, adornments, counters, mobile-friendly attributes, and full accessibility features.
Quick Start
Basic FodInput with Label, Placeholder, and HelperText.
Validation & Forms
FodInput integrates seamlessly with EditForm and DataAnnotationsValidator for validation.
Custom Validation Function
EditForm Integration
razor
<FodInput T="string" Label="IDNP" Validation="ValidateIdnp" />Input Modes, Names, & Autocomplete
InputMode triggers mobile keyboards (numeric, decimal), while AutoComplete and Name improve autofill accuracy.
Phone (numeric keyboard)
Amount (decimal keyboard)
Email with autocomplete
razor
<FodInput T="string" InputMode="numeric" InputType="InputType.Telephone" AutoComplete="tel" />Password Toggle & Events
Handle focus, blur, keydown, and paste events. Demonstrate password visibility toggle.
Password Toggle
Events + AutoFocus
Last event:
razor
<FodInput T="string" AutoFocus="true" OnFocus="HandleFocus" OnBlur="HandleBlur" />States & Variants
FodInput supports Default, Warning, Destructive, and Success variants.
Default
Warning
Destructive
Success
razor
<FodInput T="string" Variant="InputVariant.Warning" />Assistive Text
Helper text conveys additional guidance and changes appearance with validation state.
Default
Warning
Destructive
Success
razor
<FodInput T="string" HelperText="Helper message displayed here" />Text Inputs & Required
Basic text inputs with required attribute, immediate updates, and clearable functionality.
Basic with Required
Value:
Immediate + Clearable
Value:
razor
<FodInput T="string" Required="true" Immediate="true" Clearable="true" Counter="true" MaxLength="64" />Input Types
Different InputType values for Email, Password, URL, Search, and more.
Email & Password
URL & Search
Readonly / Disabled
razor
<FodInput T="string" InputType="InputType.Email" />Textarea / Multiline
Multi-line text input with character counter and auto-grow functionality.
Basic with Counter
Characters: 0/240
Auto-grow with Max Lines
Lines: 1
razor
<FodInput T="string" Multiline="true" Lines="3" Counter="true" MaxLength="240" />Numeric Input
FodInput with generic types for int and decimal values with spin buttons.
Quantity with Spin Buttons
razor
<FodInput T="int" ShowNumericButtons="true" OnIncrement="IncrementQuantity" OnDecrement="DecrementQuantity" />Generic Types
FodInput supports generic type parameters for int, decimal, DateTime, and more.
Age (int)
Price (decimal)
Birth Date
razor
<FodInput T="int" Label="Age" InputType="InputType.Number" />RTL & Internationalization
FodInput supports right-to-left languages with proper text alignment and adornment mirroring.
Arabic Locale (RTL)
ختام
Hebrew + Bidi Caret/Selection
Manual verification checks:
- Labels, placeholders, helper/error messages wrap and align to logical start; adornments mirror via padding-inline.
- Caret and selection behave predictably with mixed RTL/LTR strings; required badges and counters stay aligned.
- Clear/reveal controls and helper text stay within logical start/end without breaking layout in RTL.
razor
<div dir="rtl" lang="ar"><FodInput T="string" Label="Arabic Label" /></div>Accessibility & Best Practices
FodInput follows accessibility best practices with proper ARIA attributes and keyboard support.
- Labels always pair with id/for; helper/error text is linked via aria-describedby
- aria-invalid only turns true when validation fails; required state uses aria-required
- Prefer Counter + MaxLength for user feedback instead of silent truncation
- Use InputMode/AutoComplete/Name to improve mobile keyboards and autofill accuracy
- Blur flushes pending debounce to keep values and validation in sync
- Keyboard navigation: Tab moves focus, Enter/Space activates buttons, Escape clears on clearable inputs
razor
<FodInput T="string" Label="Email" Required="true" HelperText="Required field" />API Reference
FodInput component properties and their descriptions.
No properties defined.