FormField
A labelled form field — Attio's Settings form rows.
The field wrapper from Attio's Settings forms: a 12px/500 muted label above any control (Input, Select, Textarea…), with an optional description or a danger error line below. htmlFor wires the label to the control; error replaces the description and colours it danger.
Preview
Shown across the app.
This slug is taken.
Usage
import { FormField, Input } from "crisp";
<FormField label="Workspace name" htmlFor="ws" description="Shown across the app.">
<Input id="ws" />
</FormField>
<FormField label="Slug" htmlFor="slug" required error="This slug is taken.">
<Input id="slug" invalid />
</FormField>;API
| Prop | Type | Description |
|---|---|---|
label | ReactNode | Field label. |
htmlFor | string | id of the control (wires label htmlFor). |
required | boolean | Red asterisk after the label. |
optional | boolean | Muted "(optional)" after the label. |
description | ReactNode | Helper text under the control. |
error | ReactNode | Error under the control (replaces the description). |