FormDisplay
A read-only label and value, like a form field that shows data instead of editing it.
Master
Switch label position. The line under the row is built in.
- Account typeAccount type: Set when the account is created.Set when the account is created.
- Customer
Usage
Use FormDisplay on detail and review screens to show saved values: account type, billing email, payment terms. One component per pair, with a faint line underneath so a stack reads as a list. labelPosition start puts the label on a faint fill in the same 234px column as start-label inputs, so displays and fields line up in one Form; top puts it above the value. It takes labelPosition from an enclosing Form. Stack several in one plain box with no gap between them: the rows butt together, so the start labels read as one filled column and the lines divide the rows. Inside a Section, wrap the stack in one div, or the Section's gap spaces the rows apart; the exception is a Section with columns (or one in a RecordPage, which gives its Sections columns), where the rows go straight in as children and flow into columns left to right, each at most 554px and kept at the start, with no gap between rows. Inside a RecordPage the rows take the record's labelPosition. An empty value shows a dash. See contracts/formdisplay.json for the full contract.
Do's
- Detail pages and review steps that show saved values.
- Read-only rows next to editable fields in the same Form.
Don'ts
- Do not put a gap or margin between stacked FormDisplays, or pass them to a Section one by one. Wrap the stack in one plain div, unless the Section has columns: then pass the rows straight in.
- Do not lay rows side by side with your own grid or flex. Use Section or Form columns.
- Do not invent DescriptionList, KeyValue, DetailRow, ReadOnlyField or a local label and value pair.
- Do not use a disabled or read-only Input to show a value people cannot change. Use FormDisplay.
- Do not put long paragraphs in value. Keep it to a short value.
- Do not use raw hex.
<FormDisplay label="Account type" value="Customer" labelPosition="start" help="Set when the account is created." />