Field
Layout wrapper that composes labels, descriptions, and errors around form controls.
Layout wrapper that composes labels, descriptions, and errors around form controls.
We'll never share your email.
Username must be at least 3 characters.
tsx
import { Field, FieldDescription, FieldError, FieldGroup, FieldLabel,} from "@celestia-project/ui/composite/field"import { Input } from "@celestia-project/ui/primitive/input"
<FieldGroup> <Field> <FieldLabel htmlFor="email">Email</FieldLabel> <Input id="email" type="email" placeholder="[email protected]" /> <FieldDescription>We'll never share your email.</FieldDescription> </Field> <Field data-invalid="true"> <FieldLabel htmlFor="username">Username</FieldLabel> <Input id="username" aria-invalid /> <FieldError>Username must be at least 3 characters.</FieldError> </Field></FieldGroup>| Component | Purpose |
|---|---|
Field | Single control wrapper (orientation="vertical" | "horizontal" | "responsive") |
FieldGroup | Stacks multiple fields |
FieldSet / FieldLegend | Native fieldset grouping |
FieldLabel | Label for the control |
FieldDescription | Helper text |
FieldError | Error text (accepts errors array) |