Y2K UI

Field

A layout wrapper for form controls with label, description, and error message slots.

field-demo.app

We'll never share your email.

Installation

terminal.sh
npx y2kui@latest add field

Usage

import { Field, FieldLabel, FieldControl, FieldDescription, FieldError } from "@/components/ui/field"

<Field>
  <FieldLabel htmlFor="email">Email</FieldLabel>
  <FieldControl>
    <Input id="email" />
  </FieldControl>
  <FieldDescription>We'll never share your email.</FieldDescription>
  <FieldError>Email is required.</FieldError>
</Field>

Props

PropTypeDefaultDescription
errorstringShows error state on the input when set.
FieldLabelReactNodeLabel for the form control.
FieldDescriptionReactNodeHelper text below the control.
FieldErrorReactNodeError message in pink.

On this page