Skip to content
Home

FormRow (deprecated)

Info
Demos
Properties
Provider

Import

import { FormRow } from '@dnb/eufemia'

Description

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

Deprecation

In order to replace FormSet or FormRow you may use the Eufemia Provider and Flex as well as the Eufemia Forms Extension.

e.g. before:

Heading

Legend
Code Editor
<FormSet label_direction="vertical">
  <H2 top={0}>Heading</H2>
  <FormRow label={<span className="dnb-h--medium">Legend</span>}>
    <Input label="Label A" right />
    <Input label="Label B" />
  </FormRow>
</FormSet>

e.g. after (two examples):

Heading

Legend
Code Editor
<Provider
  formElement={{
    label_direction: 'vertical',
  }}
>
  <Form.Handler>
    <H2 top={0}>Heading</H2>
    <FieldBlock label={<span className="dnb-h--medium">Legend</span>}>
      <Flex.Horizontal>
        <Input label="Label A" />
        <Input label="Label B" />
      </Flex.Horizontal>
    </FieldBlock>
  </Form.Handler>
</Provider>

Heading

Legend
Code Editor
<Form.Handler>
  <Flex.Stack>
    <Form.MainHeading>Heading</Form.MainHeading>
    <FieldBlock label={<span className="dnb-h--medium">Legend</span>}>
      <Flex.Horizontal>
        <Field.String label="Label A" width="medium" />
        <Field.String label="Label B" width="large" />
      </Flex.Horizontal>
    </FieldBlock>
  </Flex.Stack>
</Form.Handler>

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

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

The property: direction

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

The property: vertical

Code Editor
<FormRow vertical>
  <Input label="Label" bottom />
  <Input label="Label" />
</FormRow>

Default

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

Code Editor
<FormRow>
  <Input label="Label" right />
  <Input label="Label" />
</FormRow>

Spacing

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

Code Editor
{/* The FormRow will then have a "margin-top: 2.5rem;" */}
<FormRow top="large x-small">
  <Input label="Input label">Value</Input>
</FormRow>
{/* ... or go crazy */}
<FormRow top="large medium small">
  <Input label="Input label">Value</Input>
</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 property to true.

Code Editor
<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>.