GitHub55X

Field

Vue form field wrapper that shares label, helper, and error context with inputs and controls.

API Reference
PreviousNext

Installation

Install from the Vuzeno registry:

      
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/field.json

Usage

      
      <script setup lang="ts">
import { Field } from "@/components/ui/field";
</script>

<template>
  <Field.Root>
    <!-- … -->
  </Field.Root>
</template>

Examples

The Field component provides contexts such as invalid, disabled, required, and readOnly for form elements. While most Ark UI components natively support these contexts, you can also use the Field component with standard HTML form elements.

Input

This example shows how to use the Field component with a standard input field.

Textarea

This example illustrates how to use the Field component with a textarea element.

Textarea Autoresize

Pass the autoresize prop to the Textarea component to enable automatic resizing as the user types.

Select

This example demonstrates how to integrate the Field component with a select dropdown.

Root Provider

An alternative way to control the field is to use the RootProvider component and the useField hook. This way you can access the state and methods from outside the component.

Custom Control

Use the Field.Context or useFieldContext hook to access the internal state of the field. This can help you wire up custom controls with the Field component.

Composition

      
      Field.Root
├── Field.Context
├── Field.ErrorText
├── Field.HelperText
├── Field.Input
├── Field.Item
├── Field.Label
├── Field.RequiredIndicator
├── Field.RootProvider
├── Field.Select
├── Field.Textarea

API

See Ark UI Field docs for full props and examples.

EmptyFieldset