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 indent="true">

  <FormRow no_label>

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

  </FormRow>

  <FormRow section_style="default" 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>