Skip to content
Home

FormSet (deprecated)

Info
Demos
Properties
Events

Import

import { FormSet } from '@dnb/eufemia'

Description

The FormSet component gives you both a HTML form element <form> by default and also a React provider for FormRow. This way you can define more globally e.g. if all the rows should be displayed vertically.

Code Editor
<FormSet direction="vertical">
  <FormRow>Components are now vertical aligned</FormRow>
  <FormRow>Components are now vertical aligned</FormRow>
</FormSet>

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>