FormSet

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>