Text Field

The Text Field component provides a single-line text input for collecting basic text data from users. It's the most commonly used field type for names, titles, and short text entries.

Basic Usage

With Placeholder

Required Field

Read-Only

Field Schema

A text field is authored as TextFieldMetadata (@object-ui/types), which is the source of truth for the key set: it extends BaseFieldMetadata with the text-specific validation keys.

import type { TextFieldMetadata } from '@object-ui/types';

const productName: TextFieldMetadata = {
  type: 'text',
  name: 'product_name',
  label: 'Product Name',
  placeholder: 'Enter a product name',
  help: 'Shown on the storefront and in search results.',
  required: true,
  min_length: 2,
  max_length: 120,
  pattern: '^[A-Za-z0-9 -]+$',
  pattern_message: 'Letters, digits, spaces and hyphens only.',
};

The value being edited, and the className / disabled a host supplies, are not metadata keys — they are runtime widget props. See Field Widget Props.

Use Cases

• User Names: Collecting first names, last names, or usernames
• Titles: Post titles, document names, or product names
• Short Text: Any short text input that doesn't require multiple lines
• IDs: Custom identifiers or reference numbers

Cell Renderer

When used in data tables or grids, the text field is rendered as simple truncated text:

import { TextCellRenderer } from '@object-ui/fields';

// Automatically used for type: 'text' in grids/tables
// Displays value or '-' if empty