field

Field

Wraps one form control with its label, description and error, wires their ids and validates the value; most form controls join a Field placed around them.

States: Default, Invalid

Parts

Part	File	Does
Field	Field.vue	Groups a label, an input, a description and an error of one form field, and validates its input.
FieldContent	FieldContent.vue	Groups the label and description that sit beside the control of a field.
FieldDescription	FieldDescription.vue	Gives help text for a field, such as what to enter.
FieldError	FieldError.vue	Shows why the input of a field is invalid, from its own validation, from the server or from a form library.
FieldGroup	FieldGroup.vue	Stacks several fields of a form together.
FieldLabel	FieldLabel.vue	Labels the input of a field.
FieldLegend	FieldLegend.vue	Titles a set of related fields.
FieldSeparator	FieldSeparator.vue	Separates fields of a form, optionally with a short text in between.
FieldSet	FieldSet.vue	Groups related fields under one legend.
FieldTitle	FieldTitle.vue	Shows the title of a field next to its description.
FieldValidity	FieldValidity.vue	Renders from the validation state of a field, such as a custom message or a strength meter.

Anatomy

<FieldGroup>
  <FieldSet>
    <FieldLegend />
    <FieldDescription />
    <FieldGroup>
      <Field>
        <FieldLabel />
        <FieldError />
        <FieldContent>
          <FieldLabel />
          <FieldDescription />
        </FieldContent>
      </Field>
    </FieldGroup>
    <FieldLabel>
      <Field>
        <FieldContent>
          <FieldTitle />
          <FieldDescription />
        </FieldContent>
      </Field>
    </FieldLabel>
  </FieldSet>
  <FieldSeparator />
</FieldGroup>

Styling

Part	Recipe
Field	field
FieldContent	field-content
FieldDescription	field-description
FieldError	field-error
FieldGroup	field-group
FieldLabel	field-label
FieldLegend	field-legend
FieldSeparator	field-separator
FieldSeparator	field-separator-content
FieldSet	field-set
FieldTitle	field-label

Install

Writes 13 files into components/ui/field/. For agents, npx @frontic/ui docs field prints this reference as markdown; the MCP server serves the same.

Installs with it: separator
npm packages: @vueuse/core; class-variance-authority; reka-ui

Built from

Separator

API reference

Field Field.vue

Groups a label, an input, a description and an error of one form field, and validates its input.

Prop	Type	Default
name	string	—

disabled	boolean	false

required	boolean	false

invalid	boolean

dirty	boolean

touched	boolean

validate	FieldValidateFn	—
Name validate Description Custom validation function. Return an error message (or array of messages) when invalid, or `null`/`undefined` when valid. Receives the control's value and the values of every named field in the owning form. Can be async, but an async `validate` does not prevent form submission when `validationMode` is `onSubmit`. Type `(value: unknown, formValues: Record<string, unknown>): FieldValidateResult \| Promise<FieldValidateResult>` Default —
validationMode	FieldValidationMode	'onSubmit'

validationDebounceTime	number	—

asChild	boolean	false

as	AsTag \| Component	—
Name as Description The element or component this component should render as. Can be overwritten by `asChild`. Type ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> \| (props: any, ctx: Omit<{ attrs: Attrs; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed \| undefined) => void; }, 'expose'>): any \| ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions> \| 'a' \| 'button' \| 'div' \| 'form' \| 'h2' \| 'h3' \| 'img' \| 'input' \| 'label' \| 'li' \| 'nav' \| 'ol' \| 'p' \| 'span' \| 'svg' \| 'ul' \| 'template' \| {} & string Default —
class	ClassValue	—

orientation	FieldOrientation	'vertical'

Slot	Slot props
default	{ invalid: boolean; errors: string[]; }

Data attribute	Values
data-horizontal	—

data-orientation	'vertical' \| 'horizontal' \| 'responsive'

Recipe field	Sets
base: field	3 properties

Parts

Anatomy

Styling

Install

Built from

API reference

Field Field.vue

FieldContent FieldContent.vue

FieldDescription FieldDescription.vue

FieldError FieldError.vue

FieldGroup FieldGroup.vue

FieldLabel FieldLabel.vue

FieldLegend FieldLegend.vue

FieldSeparator FieldSeparator.vue

FieldSet FieldSet.vue

FieldTitle FieldTitle.vue

FieldValidity FieldValidity.vue