Skip to content

FormRow

Description

The FormRow component is a helper to archive more easily often used DNB form layout setups. By default a FormRow is using the <formset> and <legend> HTML elements - if a label property is provided.

Layout direction

There are three possible layout properties for the FormRow children:

  • direction Children components direction
  • label_direction Children's label direction
  • vertical Forces both to be vertically
/** Only the component labels will be placed vertically */
<FormRow label="Legend label:" label_direction="vertical">
...
</FormRow>

Spacing

To give a FormRow space, properties from Space are supported:

/** The FormRow will then have a "margin-top: 2.5rem;" */
<FormRow top="large x-small" ... >
...
</FormRow>
/** ... or go crazy */
<FormRow top="large medium small" ... >
...
</FormRow>

Provider

If You are using React, You can make use of a Provider to support properties for all nested FormRows, like:

import Provider from `dnb-ui-lib/shared/Provider`
render(
<Provider formRow={{ vertical: true }}>
<FormRow>I am vertical now</FormRow>
<FormRow>I am vertical now</FormRow>
</Provider>
)

Demos

Custom legend:

Only the labels are vertical aligned - while the input labels are still horizontal.

A long horizontal FormLabel with a lot of informative text and a default indent:

The label should align the bottom

A long horizontal FormLabel with a lot of informative text and a default indent:

The label property can be used to set a row label as well as the section_style is supported

Custom vertical legend:

Combine both vertical and horizontal FormRow's

A long horizontal FormLabel with a lot of informative text and a max-width of 12rem:

Customize the .dnb-form-row styles. Instead of using the build in indent property.

Input ...

Default FormRow

Label legend for the inputs:
Input A ...Input B ...

Vertical FormRow

Legend

Vertical label direction in combination with a button

A long horizontal FormLabel with a lot of informative text:

Several components inside a horizontal FormRow - not wrapping

Long label labwl Adipiscing mauris dis proin nec Condimentum egestas class blandit netus non a suscipit id urna:

Several components inside a wrapping (wrap) horizontal FormRow

Label legend for the inputs:
Input A ...Input B ...
Checkbox legend:

FormRow with label (legend)

Input A ...Input B ...

Vertical direction and disabled