Skip to content
Home

FormSet

Info
Demos
Properties
Events

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.

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

Demos

Use the FormSet as a Provider for FormRow

A semantic h2 in a FormRow without a label

Long Group name Vitae dapibus eros viverra torquent euismod at dignissim vel mattis:
<FormSet vertical>

  <FormRow no_label>

    <H2>A semantic h2 in a FormRow without a label</H2>

  </FormRow>

  <FormRow

    section_style="mint-green-12"

    section_spacing

    label="Long Group name Vitae dapibus eros viverra torquent euismod at dignissim vel mattis:"

  >

    <Radio.Group value="first">

      <Radio label="First" value="first" />

      <Radio label="Second" value="second" />

      <Radio label="Third" value="third" />

    </Radio.Group>

  </FormRow>

</FormSet>

FormSet where FormRow inherits the direction

Custom Legend:
<FormSet direction="vertical">

  <FormRow

    label={

      <Space element="span" className="dnb-h--large">

        Custom Legend:

      </Space>

    }

  >

    <Input label="Label:" bottom />

    <Input label="Label:" />

  </FormRow>

</FormSet>

FormSet with on_submit event and prevent_submit set to true

<FormSet

  direction="horizontal"

  on_submit={({ event }) => console.log('on_submit', event)}

  prevent_submit={true}

>

  <FormRow>

    <Input

      label="Search Input:"

      type="search"

      value="Search text ..."

      right="small"

    />

    <Button type="submit" text="Trigger submit" />

  </FormRow>

</FormSet>