Composes labels, descriptions, validation, and errors around a form control.
import { Field } from "@/fragments/ui";Source<Field name="email">
<Field.Label>Email address</Field.Label>
<Field.Control>
<Input type="email" placeholder="jane@example.com" />
</Field.Control>
<Field.Description>We will never share your email.</Field.Description>npx @usefragments/cli add fieldWrites src/fragments/ui/components/Field plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.
Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.
Field is a compound: import the root and reach its parts through dot notation.
Field.LabelField.ControlField.DescriptionField.ErrorField.ValidityField.RequiredLabel, control and description wired together automatically.
<Field name="email">
<Field.Label>Email address</Field.Label>
<Field.Control>
<Input type="email" placeholder="jane@example.com" />
</Field.Control>
<Field.Description>We will never share your email.</Field.Description>
</Field>Grid places two short fields side by side and one full-width.
<Grid columns={2} gap="md">
<Field name="firstName">
<Field.Label>First Name</Field.Label>
<Field.Control>
<Input placeholder="Jane" />
</Field.Control>invalid marks the field failed and reveals Field.Error.
<Field name="username" invalid>
<Field.Label>Username</Field.Label>
<Field.Control>
<Input value="ada lovelace" error />
</Field.Control>
<Field.Error match>Usernames cannot contain spaces</Field.Error>validate runs on change and feeds Field.Error.
<Field
name="age"
validate={(value) => {
const num = Number(value);
if (isNaN(num) || num < 18) return 'Must be 18 or older';
return null;Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | Field content (Label, Control, Description, Error) |
name | string | Not set | Field name, used for error distribution from Form |
disabled | boolean | Not set | Disables the field and its control |
invalid | boolean | Not set | Marks the field as invalid |
validate | function | Not set | Custom validation function returning error string(s) or null |
validationMode | enumonSubmitonBluronChange | Not set | When to trigger validation |
validationDebounceTime | number | Not set | Debounce time in ms for onChange validation |
size | enumsmmdlg | Not set | — |