TextField

A versatile text input supporting labels, helper text, validation, passwords, multiline, and number formatting.

Basic Usage

Name

Variants

Outlined

Filled

Sizes

Error State

Email

Invalid email address

Helper Text

Username

Must be at least 3 characters

Password

Password

Multiline

Bio

Shapes

Prefix & Suffix

prefix / suffix render inline content inside the field — useful for currency symbols, units, or trailing actions.

$

kg

Character Count

Tweet

0/280

Props

Prop	Type	Default	Description
type	'text' | 'tel' | 'password' | 'number' | 'email' | 'url' | 'search'	'text'	Input type
variant	'outlined' | 'filled'	'outlined'	Visual variant
size	'sm' | 'md' | 'lg'	'md'	Size of the field
shape	'square' | 'rounded' | 'pill'	'square'	Shape of the input border
label	string	-	Label displayed above the input
placeholder	string	-	Placeholder text
helperText	string	-	Helper text displayed below the input
error	boolean	false	Whether the field is in error state
errorMessage	string	-	Error message displayed below the input
required	boolean	false	Whether the field is required (shows red asterisk)
disabled	boolean	false	Whether the field is disabled
fullWidth	boolean	false	Stretches the field to fill its container
multiline	boolean	false	Renders a textarea instead of input
rows	number	3	Number of rows for textarea
format	'currency' | 'decimal'	-	Auto-formatting for number type
onValueChange	(rawValue: string) => void	-	Callback with unformatted value
prefix	ReactNode	-	Content before the input
suffix	ReactNode	-	Content after the input
maxLength	number	-	Maximum character count (shows counter)

Also accepts all standard <input> HTML attributes.

Mobile considerations

• iOS Safari auto-zooms any input with font-size < 16px on focus. trust-ui's mobile font scale automatically bumps --tui-font-size-md up to 16px on pointer:coarse devices to prevent this — no extra config needed.
• For type="tel" / type="email" / type="url" / type="number", iOS shows the right software keyboard automatically.
• When the keyboard appears, wrap the form in <KeyboardAvoidingView> so the focused field stays visible above the keyboard.
• multiline textarea respects the same auto-zoom prevention.