Text input component for single-line and multiline text entry with validation, adornments, character counting, and accessibility features. Built on FodInput with full support for various input types and internationalization.
Basic FodInput with Label, Placeholder, and HelperText for text entry.
Basic TextField
With Clearable
Immediate Mode
<FodInput T="string"
Label="Full name"
Placeholder="Enter your name"
HelperText="Required for your profile"
@bind-Value="_name" />FodInput supports various HTML input types for specialized text entry.
Text (default)
Password
Search
Telephone
URL
<FodInput T="string"
Label="Email address"
InputType="InputType.Email"
Placeholder="name@example.com"
AutoComplete="email"
@bind-Value="_email" />FodInput supports required fields, custom validation functions, and EditForm integration.
Required Field
Custom Validation
Status Variants
<FodInput T="string"
Label="IDNP (13 digits)"
Validation="@ValidateIdnp"
@bind-Value="_idnp" />
@code {
private string? ValidateIdnp(string? value) =>
string.IsNullOrEmpty(value) ? "Required" :
value.Length != 13 ? "Must be 13 digits" :
!value.All(char.IsDigit) ? "Digits only" : null;
}Add visual elements before or after the input using StartAdornment and EndAdornment.
Currency prefix/suffix
With icon adornment
URL with protocol
<FodInput T="string" Label="Price" @bind-Value="_price">
<StartAdornment>
<span>$</span>
</StartAdornment>
<EndAdornment>
<span>USD</span>
</EndAdornment>
</FodInput>Display character count with MaxLength to help users stay within limits.
Short bio (150 chars)
Tweet (280 chars)
Username (20 chars)
<FodInput T="string"
Label="Bio"
Counter="true"
MaxLength="150"
HelperText="Keep it brief"
@bind-Value="_bio" />Enable multiline text entry with configurable rows, auto-grow, and maximum lines.
Fixed rows (3 lines)
Auto-grow (2-6 lines)
With counter
<FodInput T="string"
Label="Notes"
Multiline="true"
Lines="2"
MaxLines="6"
AutoGrow="true"
@bind-Value="_notes" />Implement password visibility toggle and confirmation patterns.
Password with toggle
Confirm password
<FodInput T="string"
Label="Password"
InputType="@(_showPassword ? InputType.Text : InputType.Password)"
@bind-Value="_password">
<EndAdornment>
<button type="button" @onclick="() => _showPassword = !_showPassword">
@(_showPassword ? "Hide" : "Show")
</button>
</EndAdornment>
</FodInput>Non-interactive states for displaying information or preventing edits.
Disabled
Readonly
Disabled with adornment
<FodInput T="string"
Label="Disabled field"
Value="_disabledValue"
Disabled="true" />
<FodInput T="string"
Label="Readonly field"
Value="_readonlyValue"
ReadOnly="true" />FodInput supports right-to-left languages with proper text alignment and adornment mirroring.
Arabic Locale (RTL)
Hebrew (RTL)
RTL considerations:
padding-inline<div dir="rtl" lang="ar">
<FodInput T="string"
Label="الاسم الكامل"
Placeholder="أدخل اسمك"
@bind-Value="_rtlName" />
</div>FodInput string-type component properties and their descriptions.