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.

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

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