Field

Low-level layout primitives for building form fields. For form integration with validation, see Form.

Components

Component	Description
`Field`	Flex container with orientation variants
`FieldLabel`	Label element for the field
`FieldContent`	Groups title and description (flex-1)
`FieldTitle`	Bold title text
`FieldDescription`	Muted helper text
`FieldGroup`	Groups multiple fields with consistent spacing

Vertical (default)

import { Field, FieldLabel, Input, VStack } from "@vesyl/ui-next";

export default function FieldVertical() {
  return (
    <VStack className="w-full max-w-xs">
      <Field>
        <FieldLabel>Email</FieldLabel>
        <Input placeholder="you@example.com" />
      </Field>
    </VStack>
  );
}

Horizontal

Label on left, input on right.

Dark mode

Use dark theme

import { Field, FieldContent, FieldDescription, FieldLabel, Switch, VStack } from "@vesyl/ui-next";

export default function FieldHorizontal() {
  return (
    <VStack className="w-full max-w-sm">
      <Field orientation="horizontal">
        <FieldContent>
          <FieldLabel>Dark mode</FieldLabel>
          <FieldDescription>Use dark theme</FieldDescription>
        </FieldContent>
        <Switch />
      </Field>
    </VStack>
  );
}

Checkbox with label

Accept terms and conditions

import { Checkbox, Field, FieldLabel } from "@vesyl/ui-next";

export default function FieldCheckbox() {
  return (
    <Field orientation="horizontal">
      <Checkbox id="terms" />
      <FieldLabel htmlFor="terms">Accept terms and conditions</FieldLabel>
    </Field>
  );
}

Field group

import { Field, FieldGroup, FieldLabel, Input } from "@vesyl/ui-next";

export default function FieldGroupDemo() {
  return (
    <FieldGroup className="w-full max-w-xs">
      <Field>
        <FieldLabel>First name</FieldLabel>
        <Input placeholder="John" />
      </Field>
      <Field>
        <FieldLabel>Last name</FieldLabel>
        <Input placeholder="Doe" />
      </Field>
    </FieldGroup>
  );
}

Label

Label is the standalone styled <label> — the same typography as FieldLabel, for use outside a Field. Associate it with a control by setting htmlFor to the control’s id. Inside a Field, prefer FieldLabel, which also reflects the field’s disabled/peer state.

Preferred carrier

import { Input, Label, VStack } from "@vesyl/ui-next";

export default function FieldLabelDemo() {
  return (
    <VStack className="w-full max-w-xs">
      <Label htmlFor="carrier">Preferred carrier</Label>
      <Input id="carrier" placeholder="UPS" />
    </VStack>
  );
}

Label accepts all native <label> props (htmlFor, className, …).

Field props

Prop	Type	Default	Description
`orientation`	`'vertical' \| 'horizontal' \| 'responsive'`	`'vertical'`	Layout direction