Field
A control with its label and supporting description.
Upstream documentationExamples
Only shown in this example.
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Field
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/field.json'Usage
A complete example using the installed component and hook paths.
Field usage
"use client";import { useId } from "react";import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";import { Input } from "@/components/ui/input";function FieldPreview() { const id = useId(); return ( <Field className="w-full max-w-64"> <FieldLabel htmlFor={id}>Display name</FieldLabel> <Input id={id} placeholder="Your name" /> <FieldDescription>Only shown in this example.</FieldDescription> </Field> );}export default function Demo() { return <FieldPreview />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
Field
Field props
React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>- orientation
- "vertical"
FieldLabel
FieldLabel props
React.ComponentProps<typeof Label>FieldDescription
FieldDescription props
React.ComponentProps<"p">FieldError
FieldError props
React.ComponentProps<"div"> & { errors?: Array<{ message?: string } | undefined>;}FieldGroup
FieldGroup props
React.ComponentProps<"div">FieldLegend
FieldLegend props
React.ComponentProps<"legend"> & { variant?: "legend" | "label" }- variant
- "legend"
FieldSeparator
FieldSeparator props
React.ComponentProps<"div"> & { children?: React.ReactNode;}FieldSet
FieldSet props
React.ComponentProps<"fieldset">FieldContent
FieldContent props
React.ComponentProps<"div">FieldTitle
FieldTitle props
React.ComponentProps<"div">