Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Mixed Orientations Field for Vue

Project Name stacked over My Project with a team note, a Make project public switch, and Archive this project when complete.

UI library: Ark UI

Project Name is stacked, placeholder My Project, with This will be visible to all team members under it. Make project public sits beside a switch, with Anyone on the internet can see this project. Archive this project when complete is a checkbox.

Reach for it when one form mixes a text field with row settings. If the archive line is the only choice, a Checkbox is enough. On Vue, Ark UI does not publish the project.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Field anatomy: root, label, input, description, error

Usage

<FieldGroup class="max-w-md">
  <Field>
    <FieldLabel>Project Name</FieldLabel>
    <Input placeholder="My Project" type="text" />
    <FieldDescription>This will be visible to all team members.</FieldDescription>
  </Field>
  <Field orientation="horizontal">
    <FieldContent>
      <FieldLabel>Make project public</FieldLabel>
      <FieldDescription>
        Anyone on the internet can see this project.
      </FieldDescription>
    </FieldContent>
    <Switch />
  </Field>
  <Field orientation="horizontal">
    <Checkbox />
    <FieldLabel class="font-normal">Archive this project when complete</FieldLabel>
  </Field>
</FieldGroup>

FAQ

Why is Project Name stacked when the other rows are not?

That Field leaves orientation unset, so it stays vertical: FieldLabel, Input, then FieldDescription. The description reads This will be visible to all team members.

How does the public switch line up with its hint?

That Field sets orientation to horizontal. FieldContent holds the FieldLabel Make project public and the FieldDescription, and the Switch is the other child.

How is the archive checkbox labeled?

The Checkbox comes first, then a FieldLabel with font-normal. The label reads Archive this project when complete. orientation is horizontal.

How do the labels connect to their controls?

FieldLabel names that control. Field connects the two for you, with no ids to write. Project Name's input is type text, with placeholder My Project.

What keeps the three rows together?

One FieldGroup stacks the vertical field, the switch row, and the checkbox row. max-w-md caps the group.

When is FieldContent used in this form?

Only on the switch row, where the label and the description need to stay a pair beside the Switch. The checkbox row is a single label, so it has no FieldContent.

API Reference

Field

Sets orientation="horizontal". The rest is on the Field page.

Input

Sets placeholder="My Project" and type="text". The rest is on the Input page.

Switch

No extra props in this demo. The rest is on the Switch page.

Checkbox

No extra props in this demo. The rest is on the Checkbox page.

All 38 field examples