Skip to content
Home

FieldBlock

Info
Demos
Properties

Description

FieldBlock is the reusable wrapper for building Field-components. It shows surrounding elements through properties from FieldProps like label and error, and ensure that spacing between different fields work as required when put into surrounding components like FlexContainer or Card.

Demos

Label only (defalult layout)

Input features goes here
<FieldBlock label="Label text">Input features goes here</FieldBlock>

Horizontal layout

Input features goes here
<FieldBlock label="Label text" layout="horizontal">

  Input features goes here

</FieldBlock>

Widths

Input feature
Input feature
Input feature
Input feature
Input feature
<FieldBlock label="Default width (no width props)">

  <TestElement>Input feature</TestElement>

</FieldBlock>

<FieldBlock label="Medium (affects outer block element)" width="medium">

  <TestElement>Input feature</TestElement>

</FieldBlock>

<FieldBlock label="Large (affects outer block element)" width="large">

  <TestElement>Input feature</TestElement>

</FieldBlock>

<FieldBlock

  label="Medium (affects contents only)"

  contentsWidth="medium"

>

  <TestElement>Input feature</TestElement>

</FieldBlock>

<FieldBlock label="Large (affects contents only)" contentsWidth="large">

  <TestElement>Input feature</TestElement>

</FieldBlock>

With description (vertical only)

Input features goes here
<FieldBlock label="Label text" labelDescription="Description text">

  Input features goes here

</FieldBlock>

With secondary

(vertical only)
Secondary text
Input features goes here
<FieldBlock label="Label text" labelSecondary="Secondary text">

  Input features goes here

</FieldBlock>

With description and secondary

(vertical only)
42
Input features goes here
<FieldBlock

  label="Label text"

  labelDescription="Description text"

  labelSecondary="42"

>

  Input features goes here

</FieldBlock>

Properties

Takes part of the properties from FieldProps