Form elements
You describe a field and the right input appears. This is the list of what appears, and how to ask for something else.
The input is chosen from the field
You do not pick a component. A field's shape decides its input, which is what keeps forty screens looking like one product.
| When the field has | You get |
|---|---|
| nothing in particular | A text input |
| options | A select, or a combobox once the list is long |
| options and multiple | A multi-select that renders chips |
| loadOptions | A combobox that fetches as you type |
| a boolean value | A switch |
| format: "date" | A date field |
| dateRange | A range, as two bound fields |
| input: "textarea" | A textarea |
| input: "password" | A password input with its reveal control |
Override it
input names the control directly when the inference is wrong for your case.
a field list
const FIELDS: RecordField<Customer>[] = [
{ key: "name", label: "Name", editable: true, required: true },
{ key: "notes", label: "Notes", editable: true, input: "textarea" },
{ key: "country", label: "Country", editable: true, options: COUNTRIES },
{ key: "tags", label: "Tags", editable: true, options: TAGS, multiple: true },
{ key: "active", label: "Active", editable: true },
{ key: "joined", label: "Joined", editable: true, format: "date" },
];When nothing fits
renderInput hands you the value and a setter and takes whatever you return. Reach for it last: a custom input is a control that stops following the theme when the theme changes.
💡 A field with no editable is read-only
Leaving
editable off is how you show a value in the record view and keep it out of the form. It is not an oversight, it is the switch.