Text Field

Single-line text input with label, description and validation message.

Import

import { TextField } from '@marbleui/ui'

Props

<TextField>

Prop	Type	Default	Description
description	`ReactNode`	`—`
errorMessage	`string \| ((validation: ValidationResult) => string)`	`—`
label	`ReactNode`	`—`
placeholder	`string`	`—`
prefix	`ReactNode`	`—`	Decorations inside the field, before / after the text.
suffix	`ReactNode`	`—`
variant	`FieldVariant`	`—`

Also accepts React Aria props (121).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria Group · React Aria Input · React Aria TextField. Follow the primitive's docs for the full keyboard map.

Usage notes

Single-line text input with label, description and validation message wired up for assistive tech.

<TextField label="Email" type="email" isRequired description="We never share it." />

Validation: isRequired, type, pattern, or validate={(v) => …}; errors show after blur or submit. Server errors go through Form validationErrors.
prefix / suffix render inside the field (icons, units, a currency sign).
variant="filled" suits dense toolbars; keep outline in forms.

Example source · show

import { TextField } from './text-field'

const Search = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden>
    <path d="m21 21-4.3-4.3M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16" />
  </svg>
)

export const styles = {
  Outline: () => (
    <div className="flex w-72 flex-col gap-5">
      <TextField label="Email" type="email" placeholder="you@company.com" description="We'll never share it." />
      <TextField aria-label="Search" placeholder="Search…" prefix={<Search />} suffix={<span className="text-xs">⌘K</span>} />
    </div>
  ),
  Filled: () => (
    <div className="flex w-72 flex-col gap-5">
      <TextField variant="filled" label="Full name" placeholder="Ada Lovelace" />
      <TextField variant="filled" label="Website" prefix={<span className="text-sm">https://</span>} placeholder="acme.com" />
    </div>
  ),
  Validation: () => (
    <TextField
      className="w-72"
      label="Username"
      isRequired
      defaultValue="ad"
      validate={(v) => (v.length < 3 ? 'At least 3 characters.' : null)}
      validationBehavior="aria"
    />
  ),
}

Source: packages/ui/src/text-field/text-field.tsx

Catalog

Category: inputs
Priority: Foundation
Primitive: react-aria
React Aria: TextField
Base UI: Input + Field