Components
Field
A layout primitive for form fields.
Field is a layout primitive for composing form fields with labels, descriptions, and error messages.
Installation
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/field.jsonUsage
"use client";
import { Input } from "@/components/ui/input";
import { Field, FieldLabel } from "@/components/ui/field";
export default function Example() {
return (
<Field>
<FieldLabel>Email</FieldLabel>
<Input placeholder="you@example.com" />
</Field>
);
}Examples
Default
We will never share your email.
With error
Enter a valid email address.
Horizontal
Field group
API
Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.
| Part | Built on | Props |
|---|---|---|
FieldSetdata-slot="field-set" | <fieldset>HTML | — |
FieldLegenddata-slot="field-legend" | <legend>HTML |
|
FieldGroupdata-slot="field-group" | <div>HTML | — |
Fielddata-slot="field" | <div>HTML |
|
FieldContentdata-slot="field-content" | <div>HTML | — |
FieldLabeldata-slot="field-label" | LabelFaber UI | — |
FieldTitledata-slot="field-label" | <div>HTML | — |
FieldDescriptiondata-slot="field-description" | <p>HTML | — |
FieldSeparatordata-slot="field-separator" | <div>HTML |
|
FieldErrordata-slot="field-error" | <div>HTML |
|
Changelog
- v0.1.0Accessibility, correctness, and token fixes across the kit, from a full code-smell audit.minor
Last updated on