@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
62 lines (54 loc) • 1.47 kB
Markdown
---
version: 10.104.0
generatedAt: 2026-04-17T18:46:12.774Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---
## Deprecation
In order to replace FormSet or FormRow you may use the Eufemia [Provider](/uilib/usage/customisation/provider-info) and [Flex](/uilib/layout/flex) as well as the Eufemia [Forms Extension](/uilib/extensions/forms).
e.g. before:
```tsx
render(
<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):
```tsx
render(
<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>
)
```
```tsx
render(
<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>
)
```