Field
Combine labels, controls, descriptions, and errors into accessible form fields.
We will never share your email.
Installation
npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/field.jsonUsage
Use field primitives to structure form controls with consistent labels, help text, and validation errors.
<script setup lang="ts">
import { Field, FieldDescription, FieldGroup, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
</script>
<template>
<FieldGroup>
<Field>
<FieldLabel for="email">Email</FieldLabel>
<Input id="email" type="email" placeholder="you@example.com" />
<FieldDescription>We will never share your email.</FieldDescription>
</Field>
</FieldGroup>
</template>
Orientations: vertical (default), horizontal, and responsive (stacks until the
@md/field-group breakpoint). Use FieldError with an errors prop for form libraries, or pass
children. FieldSet + FieldLegend group related controls; FieldSeparator divides sections.