Forms
PropertyList
The facts at the top of a record, label on the left and value on the right, in Spectrum's side-label form layout.
Preview
Props
| Prop | Type | Description |
|---|---|---|
label | string | |
labelWidth | number | Label column width in px (default 160). |
stacked | boolean | Labels above their values, for forms on phones. |
className | string | |
children | React.ReactNode |
Guidelines
The facts at the top of a record, label on the left and value on the right, in Spectrum's side-label form layout. A project has four: Brand, Status, Content type and Revenue. Each value is the control that edits it, so there is no separate edit mode.
Provide: PropertyList with an optional label and labelWidth (default 160, about 112 on phones), holding Property rows with label, optional icon, and the value or control as children.
- Use controls that read as values at rest: a quiet Picker for status, a TagGroup for content type, a TextField for amounts, a Link for related records.
- Keep a record to the facts you actually fill in. If a row is empty most of the time, it probably belongs somewhere else.
- Rows are 40px tall so phones keep good touch targets.
- On phones, set
stackedon forms with tap-to-choose tags so each label sits above its choices and the tags get the full width.