Text Field

The text field renders a single-line text input.

Schema Properties

Prop

Type

UI Options

Option	Type	Default	Description
`copyable`	`boolean`	`false`	Show copy button
`autoFocus`	`boolean`	`false`	Auto-focus the input on mount
`className`	`string`	-	CSS class applied to the field container
`width`	`string \| number`	-	Inline width applied to the field

Basic Usage

const schema = defineSchema({
  fields: [
    {
      type: "text",
      name: "username",
      label: "Username",
      required: true,
      minLength: 3,
      maxLength: 20,
      placeholder: "Enter username",
    },
  ],
});

Examples

With Validation

{
  type: "text",
  name: "slug",
  label: "URL Slug",
  required: true,
  minLength: 3,
  maxLength: 50,
  pattern: /^[a-z0-9-]+$/,
  placeholder: "my-page-slug",
}

Copyable Input

{
  type: "text",
  name: "apiKey",
  label: "API Key",
  readOnly: true,
  defaultValue: "sk_live_abc123",
  ui: { copyable: true },
}

Auto-Focus

{
  type: "text",
  name: "search",
  label: "Search",
  ui: { autoFocus: true },
}

With Description

{
  type: "text",
  name: "displayName",
  label: "Display Name",
  description: "This will be shown publicly on your profile",
  placeholder: "John Doe",
}

Auto-Derived Validators

Property	Validator
`required: true`	`required`
`minLength`	`minLength`
`maxLength`	`maxLength`
`pattern`	`pattern`

Text Field

On this page