Skip to content

FormRow

Description

The FormRow component is a helper to archive more easily often used DNB form layout setups.

Fieldset and Legend

By default a FormRow is using the <fieldset> and <legend> HTML elements - if a label property is provided.

Layout direction

The default direction is horizontal. You can combine several FormRow's (example below) and the direction to achieve the wanted UX layout. You can also send the layout properties along from a FormSet (example below). There are three possible layout properties for the FormRow children:

  • label_direction Children's label direction
  • direction Children components direction
  • vertical Forces both to be vertically

The property: label_direction

The property: direction

The property: vertical

Default

This is how it looks if you don't make any definitions.

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

You can send down the formRow as an application wide property (Context). More info about the provider usage.

Responsiveness

The FormRow component provides by default responsiveness. But if you also want the form components to act responsive. E.g. the label of the input should be wrapped to be vertical / above the input, then you have to set the responsive prop to true.

<FormRow responsive="true">
<Input label="Input label">Value</Input>
</FormRow>

Wrapping happens then if the view port (screen) is less than max-width: 40em.

You can also make use of the helper class, e.g. <FormRow className="dnb-responsive-component">...</FormRow>.

Demos

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

Custom legend:

The label should align the bottom

A long horizontal legend (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

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

Combine both vertical and horizontal FormRow's

Custom vertical legend:

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

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

Default FormRow

Vertical FormRow

Label legend for the inputs:

Vertical label direction in combination with a button

Legend

Several components inside a horizontal FormRow - not wrapping

A long horizontal legend (FormLabel) with a lot of informative text:

Several components inside a wrapping (wrap) horizontal FormRow

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

FormRow with label (legend)

Label legend for the inputs:
Checkbox legend:

Vertical direction and disabled

Combining different components and directions

Phone number