InputTextField

A versatile text input field that supports multiple input types through HTML5 input elements.

Props

Prop	Type	Default	Description
value	(instance: TCommand) => unknown		Required. Accessor function returning the property value from the command instance.
title	string		The label for the field.
type	'text' | 'email' | 'password' | 'color' | 'date' | 'datetime-local' | 'time' | 'url' | 'tel' | 'search'	'text'	The HTML input type.
placeholder	string		Placeholder text shown when empty.
required	boolean		Override automatic required detection.

Examples

Text Input:

<InputTextField<UserCommand> value={c => c.name} title="Full Name" placeholder="Enter your name" />

Email Input:

<InputTextField<UserCommand> value={c => c.email} type="email" title="Email" placeholder="your@email.com" />

Password Input:

<InputTextField<UserCommand> value={c => c.password} type="password" title="Password" />

Date Input:

<InputTextField<UserCommand> value={c => c.birthDate} type="date" title="Birth Date" />

Color Picker:

<InputTextField<UserCommand> value={c => c.favoriteColor} type="color" title="Favorite Color" />

URL Input:

<InputTextField<UserCommand> value={c => c.website} type="url" title="Website" placeholder="https://example.com" />

See Also

• Field Types Overview
• CommandForm Overview