FormRow

Description

The FormRow component is a helper to more easily achieve 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

<FormRow label_direction="vertical">
<Input label="Label:" right />
<Input label="Label:" />
</FormRow>

The property: direction

<FormRow direction="vertical">
<Input label="Label:" bottom />
<Input label="Label:" />
</FormRow>

The property: vertical

<FormRow vertical>
<Input label="Label:" bottom />
<Input label="Label:" />
</FormRow>

Default

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

<FormRow>
<Input label="Label:" right />
<Input label="Label:" />
</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

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 be 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 viewport (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

Basic FormRow

<FormRow>
<Input label="Default horizontal FormRow:" placeholder="Input ..." />
</FormRow>

Vertical FormRow

Label legend for the inputs:
<FormRow direction="vertical" label="Label legend for the inputs:">
<Input label="Vertical direction:" placeholder="Input A ..." />
<Input label="Vertical direction:" placeholder="Input B ..." top="small" />
</FormRow>

Vertical aligned labels

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

Custom legend:

<FormRow
label={
<Ingress top="0" bottom="small">
Custom legend:
</Ingress>
}
label_direction="vertical"
>
<Input label="Label A:" value="Input A" right="small" />
<Input label="Label B:" value="Input B" />
</FormRow>

Vertical direction

Vertical label direction in combination with a button

Legend
const CustomRow = styled(FormRow)`
.dnb-form-row__content .dnb-button {
align-self: flex-end;
transform: translateY(0.25rem); /* 4px down */
}
`
render(
<CustomRow
label={ <Space element="span" className="dnb-h--large" top="0" bottom="0">Legend</Space> }
label_direction="vertical"
>
<Input label="Vertical input label" value="Input" right="small" />
<Button text="Button" />
</CustomRow>
)

Combine both vertical and horizontal FormRow's

Custom vertical legend:
// 1. In the nested FormRow we reset the layout to not be vertical
// 2. So we can use a different direction ("label_direction")
render(
<FormRow
label={
<Space element="span" className="dnb-h--large" top={false} bottom="large" no_collapse={true} >
Custom vertical legend:
</Space>
}
vertical
>
<Input label="Vertical input A" />
<Input label="Vertical input B" top="medium" />
<FormRow
vertical="false"
label_direction="horizontal"
top="medium"
>
<Input label="Horizontal input A" right="small" />
<Input label="Horizontal input B" />
</FormRow>
<Input label="Vertical input C" top="medium" />
</FormRow>
)

Several components inside a horizontal FormRow - not wrapping

A long horizontal legend (FormLabel) with a lot of informative text:
<FormRow
label="A long horizontal legend (FormLabel) with a lot of informative text:"
indent="true"
indent_offset="large"
direction="horizontal"
>
<Input label="Input label A:" right="small" />
<Input label="Input label B:" />
</FormRow>

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
label="Long label labwl Adipiscing mauris dis proin nec Condimentum egestas class blandit netus non a suscipit id urna:"
indent
indent_offset="x-large"
wrap
direction="horizontal"
>
<Input label="Input A:" top="small" right="small" />
<Input label="Input B:" top="small" right="small" />
<Input label="Input C:" top="small" right="small" />
</FormRow>

Legend usage

Label legend for the inputs:
Checkbox legend:
<FormSet label_direction="vertical">
<FormRow label="Label legend for the inputs:" >
<Input label="Vertical label direction:" placeholder="Input A ..." right="small" />
<Input label="Vertical label direction:" placeholder="Input B ..." />
</FormRow>
<FormRow label="Checkbox legend:" top="medium">
<Checkbox label="Checkbox" />
</FormRow>
</FormSet>

Legend and indent usage

A long horizontal legend (FormLabel) with a lot of informative text and a default indent:
<FormRow indent="default" label="A long horizontal legend (FormLabel) with a lot of informative text and a default indent:">
<Checkbox id="alone-1" label="Checkbox" />
</FormRow>

Inherit context

<FormRow vertical={true} disabled={true}>
<Input label="Vertical input A:" placeholder="Input A ..." />
<Input label="Vertical input B:" placeholder="Input B ..." top="medium" />
</FormRow>

Combining different components and directions

Phone number
const PhoneRow = styled(FormRow)`
.dnb-dropdown__shell,
.dnb-dropdown__list {
width: auto;
min-width: 6rem;
}
@media screen and (max-width: 40em) {
.dnb-dropdown {
margin-bottom: 0.5rem;
}
`
render(
<FormRow vertical={true}>
<Input
label="Input"
placeholder="Input ..."
bottom
/>
<PhoneRow
label="Phone number"
label_direction="vertical"
vertical={false}
>
<Dropdown
right="small"
title="Country code"
data={['+47', '+48', '+49']}
value={0}
/>
<Input placeholder="Your phone number" />
</PhoneRow>
</FormRow>
)

Section style

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:
<FormRow
section_style="mint-green"
section_spacing="default"
indent={true}
label="A long horizontal legend (FormLabel) with a lot of informative text and a default indent:"
>
<Checkbox label="Checkbox" />
</FormRow>

Custom indent layout

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

A long horizontal legend (FormLabel) with a lot of informative text and a max-width of 12rem:
const CustomRow = styled(FormRow)`
align-items: flex-end;
> .dnb-form-label {
max-width: 12rem;
background: var(--color-white);
color: var(--color-fire-red);
}
`
render(
<CustomRow label="A long horizontal legend (FormLabel) with a lot of informative text and a max-width of 12rem:">
<Checkbox label="Checkbox" />
</CustomRow>
)