Field

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download field -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { Field } from "@/components/ui/field";
import { FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { FieldDescription } from "@/components/ui/field";
import * as UI from "@/components/ui/field";

const Component = UI.Field;

const args = {
  "orientation": "vertical",
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & {
    orientation?: "vertical" | "horizontal" | "responsive";
  };
</script>

<template>
  <div class="w-[380px] py-4">
    <Field v-bind="args">
      <FieldLabel for="email">Email</FieldLabel>
      <Input id="email" type="email" placeholder="you@example.com" />
      <FieldDescription>We'll never share your email.</FieldDescription>
    </Field>
  </div>
</template>

Props API

Subcomponents

• FieldSet
• FieldLegend
• FieldGroup
• FieldContent
• FieldLabel
• FieldTitle
• FieldDescription
• FieldSeparator
• FieldError

The layout slots are width-driven, so each story renders inside a fixed-width wrapper: under the centered layout the story parent is shrink-to-fit, and a w-full field nested in a w-full group collapses to zero.

Subcomponents

• FieldContent
• FieldDescription
• FieldError
• FieldGroup
• FieldLabel
• FieldLegend
• FieldSeparator
• FieldSet
• FieldTitle

Examples

Default

<script setup lang="ts">
import { Field } from "@/components/ui/field";
import { FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { FieldDescription } from "@/components/ui/field";
import * as UI from "@/components/ui/field";

const Component = UI.Field;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <div class="w-[380px] py-4">
    <Field v-bind="args">
      <FieldLabel for="email">Email</FieldLabel>
      <Input id="email" type="email" placeholder="you@example.com" />
      <FieldDescription>We'll never share your email.</FieldDescription>
    </Field>
  </div>
</template>

With Input

<script setup lang="ts">
import { Field } from "@/components/ui/field";
import { FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { FieldDescription } from "@/components/ui/field";
import * as UI from "@/components/ui/field";

const Component = UI.Field;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <div class="w-[380px] py-4">
    <Field v-bind="args">
      <FieldLabel for="email">Email</FieldLabel>
      <Input id="email" type="email" placeholder="you@example.com" />
      <FieldDescription>We'll never share your email.</FieldDescription>
    </Field>
  </div>
</template>

With Error

<script setup lang="ts">
import { Field } from "@/components/ui/field";
import { FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { FieldError } from "@/components/ui/field";
import * as UI from "@/components/ui/field";

const Component = UI.Field;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <div class="w-[380px] py-4">
    <Field data-invalid="true">
      <FieldLabel for="username">Username</FieldLabel>
      <Input
        id="username"
        placeholder="Choose a username"
        :aria-invalid="true"
      />
      <FieldError>This username is already taken.</FieldError>
    </Field>
  </div>
</template>

Horizontal

<script setup lang="ts">
import { Field } from "@/components/ui/field";
import { FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import * as UI from "@/components/ui/field";

const Component = UI.Field;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
const orientations = ["vertical", "horizontal", "responsive"] as const;
</script>

<template>
  <div class="flex w-[380px] flex-col gap-6 py-4">
    <Field
      v-for="orientation in orientations"
      :key="orientation"
      :orientation="orientation"
    >
      <FieldLabel :for="'orientation-' + orientation">{{
        orientation
      }}</FieldLabel>
      <Input :id="'orientation-' + orientation" placeholder="Value" />
    </Field>
  </div>
</template>

Group

<script setup lang="ts">
import { FieldGroup } from "@/components/ui/field";
import { Field } from "@/components/ui/field";
import { FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { FieldSeparator } from "@/components/ui/field";
import * as UI from "@/components/ui/field";

const Component = UI.Field;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <div class="w-[380px] py-4">
    <FieldGroup>
      <Field>
        <FieldLabel for="first">First name</FieldLabel>
        <Input id="first" placeholder="Ada" />
      </Field>
      <FieldSeparator />
      <Field>
        <FieldLabel for="last">Last name</FieldLabel>
        <Input id="last" placeholder="Lovelace" />
      </Field>
    </FieldGroup>
  </div>
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Field

FieldContent

FieldDescription

FieldError

FieldGroup

FieldLabel

FieldLegend

FieldSeparator

FieldSet

FieldTitle

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.