The FormRow component is a helper to archive more easily often used DNB form layout setups.
Fieldset and Legend
By default a
FormRow is using the
<legend> HTML elements - if a label property is provided.
The default direction is
You can combine several FormRow's (example below) and the direction to achieve the wanted UX layout. You can also send the layout properties along from a FormSet (example below).
There are three possible layout properties for the FormRow children:
label_directionChildren's label direction
directionChildren components direction
verticalForces both to be vertically
This is how it looks if you don't make any definitions.
To give a FormRow space, properties from Space are supported:
/** The FormRow will then have a "margin-top: 2.5rem;" */<FormRow top="large x-small" ... >...</FormRow>/** ... or go crazy */<FormRow top="large medium small" ... >...</FormRow>
You can send down the
formRow as an application wide property (Context). More info about the provider usage.
The FormRow component provides by default responsiveness.
But if you also want the form components to act responsive. E.g. the label of the input should be wrapped to be vertical / above the input, then you have to set the
responsive prop to
<FormRow responsive="true"><Input label="Input label">Value</Input></FormRow>
Wrapping happens then if the view port (screen) is less than
You can also make use of the helper class, e.g.