Skip to content
Home

Form.Card

Info
Demos
Properties

Import

import { Form } from '@dnb/eufemia/extensions/forms'
render(<Form.Card />)

Description

Form.Card is a wrapper for the Card component to make it easier to use inside a form:

  • It will set stack to true by default (instead of false).

But in all other ways, it works just like the Card component.

Demos

Main heading

Nested card

Code Editor
<Flex.Stack>
  <Form.MainHeading>Main heading</Form.MainHeading>
  <Form.Card>
    <Field.String label="Field A" required />
    <Field.String label="Field B" required />
    <Form.Card>
      <P>Nested card</P>
    </Form.Card>
  </Form.Card>
  <Form.SubmitButton />
</Flex.Stack>