TextField

A labelled single-line text field.

The frame above shows the real web components, in the mode this site is in.

The design preview shows it next to every other web component.

When to use it

• Always give it a visible label. Placeholder text is not a substitute: it disappears as soon as the person types.
• An error replaces the description, turns the border red and makes it thicker.
• Clear error as soon as the person edits the value. An invalid field blocks its form from being submitted, so an error left in place would block the corrected value too.

Example

import { TextField } from "@acme/ui";

<TextField
  label="Email"
  type="email"
  description="We send the sign-in code to this address."
  value={email}
  onChange={setEmail}
/>

Options

The web component’s props. The other platforms take the same options under their own naming conventions.

Prop	Type	Notes
label	string	Required. Always visible.
value	string	Required.
onChange	(value: string) => void	Required.
description	string	Help shown under the field. Replaced by error while there is one.
error	string	What is wrong and how to fix it.
placeholder	string
type	HTMLInputTypeAttribute	Defaults to text.
inputMode	"text" | "numeric" | "decimal" | "tel" | "email" | "url" | "search"
name	string
autoComplete	HTMLInputAutoCompleteAttribute
autoFocus	boolean
required	boolean
disabled	boolean

Source

Platform	File
Web (React)	packages/ui/src/TextField.tsx
Desktop (GPUI)	crates/acme-ui/src/components.rs
React Native	packages/ui-native/src/TextField.tsx
Compose Multiplatform	kotlin/ui/src/commonMain/kotlin/acme/ui/TextField.kt