Labels, descriptions and errors for Grasscn form controls.
Preview
Choose a name for your world.
Usage
Field is delivered by the form item; there is no separate field registry item. Import Field, FieldLabel, FieldContent and FieldDescription from @/components/ui/field. The example connects its label and description to a real Input.
Composition
Use FieldGroup inside FieldSet, with FieldLegend for the group name. FieldTitle supplies non-label text. Field orientation is vertical (default), horizontal or responsive; responsive changes at container width 448px under FieldGroup. FieldSeparator inserts a separator with optional text. These layouts compose native constituents as web adaptations.
API and accessibility
Set aria-invalid and aria-describedby on the control yourself: data-invalid on Field does not establish either. FieldError accepts an errors array, deduplicates messages, and has role="alert"; explicit children override generated messages. FieldSet/FieldGroup do not supply scale context, so pass scale to text and control parts when changing it. FieldLegend supports variant="legend" (default) or variant="label". FieldSeparator has no scale prop and uses default-scale children.
See the underlying API for shared semantics.
Validation message
Installation
Component source
This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.
"use client";
import { cva } from "class-variance-authority";
import type { VariantProps } from "class-variance-authority";
import { useMemo } from "react";
import { Label } from "./label";
import { MinecraftProse } from "./minecraft-prose";
import type { MinecraftProseProps } from "./minecraft-prose";
import "./minecraft-field.css";
import {The Form playground retains the complete Controller composition with reset, disabling and validation.