Material-UI Advanced layout customization

tip

For most projects, you DON'T need that level of customization. You should use CSS instead.

Set custom layout components

Concrete Form allows you to customize every single component used for layout.
These components need to be defined at the <Form /> level like so:

<Form layout={{
  control: ...,
  errors: ...,
  itemLabel: ...,
  itemsGroup: ...,
  label: ...,
  labelledControl: ...,
}}>
  Your form content
</Form>

Available layout components

Label

​

Label

FoobarBaz

layout	description
control	Renders control and errors components
errors	Renders the field errors (to be injected in control)
itemLabel	Renders each item (control + label) in a group (ex: Checkbox or Radio)
itemsGroup	Renders a group of controls (items)
label	Renders a label inside LabelledControl
labelledControl	Renders a label and a control

Layout components props

Components will receive these props

control

Render: <FormControl fullWidth />

Name	Type	Description
name	string	name of the control
control	node	Control component
errors	node	Errors component. (result of errors layout)
{...props}	object	All props provided with formControlProps . (see Material-UI doc)

caution

On the example above, notice the missing pink line between the text control and the error. The reason is Material-UI will handle the error inside the TextField component. If that's the case, errors will be empty here since it's already included in control.

errors

Name	Type	Description
name	string	name of the control
errors	string[]	array of translated errors

itemLabel

Render: <FormControlLabel />

Name	Type	Description
name	string	name of the control
control	node	control element (checkbox, radio, toggle switch, etc)
label	node	label of the control
labelPosition	"top" | "bottom" | "left" | "right"	position of the label

itemGroup

Render: <FormGroup />

Name	Type	Description
name	string	name of the control
items	node	result of multiple itemLabel Note: this is a single node and not an array
label	node	label of the control
orientation	"vertical" | "horizontal"	orientation of the items

label

Render: <FormLabel />

Name	Type	Description
label	node	label to render
htmlFor	string | undefined	"for" value to provide to the label (if available)
{...props}	object	All extra props provided to LabelledControl . (see Material-UI doc)

labelledControl

Render: <Grid /> components

Name	Type	Description
control	node	result of control
label	node	result of label
labelPosition	"top" | "bottom" | "left" | "right"	position of the label (relative to the control)
mainGridProps	object	main <Grid container /> component
labelGridProps	object	label <Grid item /> component
controlGridProps	object	control <Grid item /> component