Skip to content
Home

FieldBlock

Info
Demos
Properties

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>