TextField

Single-line text input with FormField chrome, icons, and adornments.

Introduction

TextField is a complete form control: a label, input, and helper or error text in one component. It wraps FormField chrome around a native <input>, so you get consistent layout, validation styling, and adornments without assembling those pieces yourself.

For specialized inputs, use dedicated components instead of changing type alone—PasswordField, NumberField, Textarea, and Select each extend the same FormField pattern with behavior tuned to that input.

Import

import { TextField } from "@bridge-ui/vue/Components/TextField";

import { TextField } from "@bridge-ui/react/Components/TextField";

Basic usage

Provide a label and placeholder. Bind the value with value/onChange in React or v-model in Vue. For uncontrolled usage with an initial value, use defaultValue in React or default-value in Vue.

Form props

Standard form attributes are supported through inherited FormField props and native input attributes:

required — shows a red asterisk on the label. Pair with the native required attribute when validating with HTML forms.
disabled — prevents interaction and applies disabled styling to the field shell and input.
readonly — keeps the value visible and focusable but not editable.

Use description for helper text below the field. When error and errorMessage are both set, the description is hidden unless showDescriptionOnError.

Variants

Control the field shell appearance with the variant prop. Available variants: outline (default), filled, notched, stacked, and underlined.

Sizes

Control the field size with the size prop. Available sizes: 2xs, xs, sm, md (default), lg, xl, and 2xl.

Rounded

Use the rounded prop to control border radius. Available values: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, and full (defaults vary by component).

Icons and adornments

Add an icon with startIcon or endIcon, or prefix/suffix text with start and end.

Validation

Set error and errorMessage to show invalid styling and an error message below the field. Use required to show a red asterisk on the label.

PasswordField, NumberField, Textarea, Select, ColorField

Accessibility

For the field to be accessible, the input must be linked to its label and helper or error text:

The label is associated with the input via htmlFor / id, using controlId (auto-generated when omitted).
description and errorMessage are linked through aria-describedby on the input.
When error is true, the input receives aria-invalid="true".

Provide a stable controlId when rendering client-only so labels associate correctly on first paint.

Anatomy

TextField composes FormField around a native <input>:

FormField (root)
├── Header — label, optional corner text, required indicator
├── Container — variant shell (outline, filled, …)
│   ├── Start adornment — optional prefix text or icon
│   ├── Input — native text input
│   └── End adornment — optional suffix text or icon
└── Footer — description (helper text) or error message

Native input attributes (type, placeholder, autoComplete, etc.) are forwarded to the inner <input> element.

API

Prop	Type	Default	Description
default-value	string	—	Initial value for uncontrolled usage (without v-model).
v-model	string	—	Two-way binding for the input value.

Prop	Type	Default	Description
defaultValue	string	—	Initial value for uncontrolled usage.
onChange	ChangeEventHandler<HTMLInputElement>	—	Native input change handler.
value	string	—	Input value. Use with onChange for controlled state.

TextField-specific

Native input attributes (type, placeholder, autoComplete, etc.) are merged onto the inner <input> element.

Inherited from FormField

Prop	Type	Default	Description
classes	FormFieldClasses	—	Class overrides per part.
color	FormFieldColor	"primary"	Color applied to the field control.
controlId	string	—	Associates labels and helper text with the control. Auto-generated when omitted.
corner	string	—	Secondary label text at the inline end of the header row.
customProps	FormFieldCustomProps	—	Props for each part. label accepts Label props (without children); error label colors come from Label.
description	string	—	Helper text below the control. Hidden when error and an error message are set, unless showDescriptionOnError.
disabled	boolean	false	Whether the control is disabled.
end	string	—	Inline-end text inside the field (suffix).
endIcon	IconSource	—	Icon at the inline end.
error	boolean	false	Applies invalid styling. Hides description when an error message is shown, unless showDescriptionOnError.
errorIcon	IconSource	"alert"	Icon shown when invalid and showErrorIcon is enabled.
errorMessage	string	—	Error message below the control.
hideErrorMessage	boolean	false	Does not reserve the error row. That row is also omitted while a description is shown.
label	string	—	Primary label text above the control.
readonly	boolean	false	Whether the control is read-only.
required	boolean	false	Shows a red asterisk on the label.
rounded	FormFieldRounded	"md"	Border radius of the field control.
showDescriptionOnError	boolean	false	Keeps the description visible while the field is invalid.
showErrorIcon	boolean	true	Shows an error icon when invalid.
size	FormFieldSize	"md"	Typography and control sizing.
slots	FormFieldSlots	—	React slots. Vue: #label, #corner, default, #description, #errorMessage, #start, #end.
start	string	—	Inline-start text inside the field (prefix).
startIcon	IconSource	—	Icon at the inline start.
variant	FormFieldVariant	"outline"	Visual variant of the field shell.