Skip to content

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")
// 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:"
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:"
direction="horizontal"
wrap
>
<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>

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