HTML5 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

Foo

bar

Baz

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

Name	Type	Description
name	string	name of the control
control	node	Control component
errors	node	Errors component. (result of errors layout)

errors

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

itemLabel

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

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

Name	Type	Description
label	node	label to render
htmlFor	string | undefined	"for" value to provide to the label (if available)

labelledControl

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)