TextField

Labelled single-line text input — wraps the Input primitive with label, help text, error state, and multiple input types

Interactive-mode

Examples

Default text field

Full name

Email field with help text

Email address

We'll never share your email.

Error state with required

Username*

Username is already taken.

With leading icon addon (StartAddon)

With trailing currency addon (EndAddon)

Amount

USD

API

The element family below can be composed together. Click an element to jump to its properties.

Element	Purpose
TextField	A labelled single-line text input chunk. Wraps the `Input` primitive inside a `space-y-1.5` envelope with an optional `FormLabel`, the input itself, and optional help text. Supports multiple input types via the `Type` enum. When `StartAddon` or `EndAddon` slots are provided, the input is rendered inside an `InputGroup` with `InputGroupAddon` siblings.

TextField

A labelled single-line text input chunk. Wraps the Input primitive inside a space-y-1.5 envelope with an optional FormLabel, the input itself, and optional help text. Supports multiple input types via the Type enum. When StartAddon or EndAddon slots are provided, the input is rendered inside an InputGroup with InputGroupAddon siblings.

Property	Type	Description
Label	string?	Label text rendered above the input via `FormLabel`. Omit to hide the label.
HelpText	string?	Helper text rendered below the input. Shown in `text-danger-fg` when `Error` is true, otherwise `text-muted-foreground`.
Error	bool	Applies error styling to the label and help text. Default: `false`.
Required	bool	Appends a red asterisk to the label via `FormLabel`. Default: `false`.
Disabled	bool	Disables the underlying input. Default: `false`.
Id	string	HTML `id` for the input — wired to the label's `for` attribute. Auto-generated by default.
Value	string?	Current input value. Use `@bind-Value` for two-way binding.
ValueChanged	EventCallback<string?>	Fires when the value changes. Part of the `@bind-Value` pair.
Placeholder	string?	Placeholder text shown in the empty input.
Type	TextField.TextFieldType	Input type. One of `Text`, `Email`, `Number`, `Tel`, `Url`. Default: `Text`.
StartAddon	RenderFragment?	Optional leading addon slot. When set, the input renders inside an `InputGroup` with an `InputGroupAddon` (Align `InlineStart`) wrapping this content. Use for leading icons, prefix text, etc.
EndAddon	RenderFragment?	Optional trailing addon slot. When set, the input renders inside an `InputGroup` with an `InputGroupAddon` (Align `InlineEnd`) wrapping this content. Use for trailing icons, suffix text, currency labels, etc.