ComponentServer-safe

Field

Structures labels, controls, help text and errors without forcing a form library.

Installation

Preview

Workspace handle

Lowercase letters, numbers and hyphens. Used in your public URL.

Spaces are not allowed.

Usage

tsx

import { Field, FieldDescription, FieldError, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

<Field>
  <FieldLabel htmlFor="handle">Workspace handle</FieldLabel>
  <Input aria-invalid id="handle" />
  <FieldDescription>Used in your public URL.</FieldDescription>
  <FieldError>That handle is already taken.</FieldError>
</Field>

API reference

Prop	Type	Default	Description
`orientation`	`"vertical" \| "horizontal" \| "responsive"`	`"vertical"`	Controls label and control layout.
`errors`	`Array<{ message?: string }>`	`—`	Optional form-library error collection rendered by FieldError.
`className`	`string`	`—`	Overrides or extends the generated Tailwind classes.
`disabled`	`boolean`	`false`	Prevents user interaction when supported.