Field: Long content

Labels, descriptions and errors wrap inside narrow forms, including unbroken strings, and never push the layout wider.

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

export function FieldLongContent() {
  return (
    <Field invalid className="w-72">
      <FieldLabel>
        A label long enough to wrap onto a second line in a narrow form
      </FieldLabel>
      <Input defaultValue="averyveryverylongunbrokenvaluethatkeepsgoing" />
      <FieldDescription>
        averyveryverylongunbrokendescriptionthatmustwrapinsteadofoverflowing
      </FieldDescription>
      <FieldError
        errors={[
          {
            message:
              "This message is long on purpose and wraps onto several lines without pushing anything wider.",
          },
        ]}
      />
    </Field>
  )
}

Add this example

This adds the example as components/examples/field/long-content.tsx, together with the Field component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/field-long-content.json

To add only the component, follow the Field installation.

Props in this example

The Field props this example sets, from the API reference.

Field

Prop	Type	Default
`invalid`Set it from a form library or server response.	`boolean`	`–`

FieldError

Prop	Type	Default
`errors`Errors from a form library or server. Shown when the list has a message.	`Array<{ message?: string } \| undefined>`	`–`

Every prop is in the Field API reference.

More Field examples

See them all, with keyboard support and accessibility notes, on the Field page.