Skip to content
Home

FieldBlock

Info
Demos
Properties

Demos

Label only (default layout)

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

With info

Input features goes here
For your information
Code Editor
<FieldBlock label="Label text" info="For your information">
  Input features goes here
</FieldBlock>

Label size

Heading

Legend with medium heading size
Code Editor
<Form.Handler>
  <Flex.Stack>
    <Form.MainHeading>Heading</Form.MainHeading>
    <FieldBlock label="Legend with medium heading size" size="medium">
      <Flex.Horizontal>
        <Field.String label="Label A" width="medium" />
        <Field.String label="Label B" width="medium" />
      </Flex.Horizontal>
    </FieldBlock>
  </Flex.Stack>
</Form.Handler>

Horizontal layout

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

Horizontal layout with info

Input features goes here
For your information
Code Editor
<FieldBlock
  label="Label text"
  layout="horizontal"
  info="For your information"
>
  Input features goes here
</FieldBlock>

Widths

Input feature
Input
Input feature
Input feature
Input
Input feature
Input feature
Code Editor
<FieldBlock label="Default width (no width props)">
  <TestElement>Input feature</TestElement>
</FieldBlock>
<FieldBlock label="Small (affects outer block element)" width="small">
  <TestElement>Input</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="Small (affects contents only)" contentsWidth="small">
  <TestElement>Input</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
Code Editor
<FieldBlock label="Label text" labelDescription="Description text">
  Input features goes here
</FieldBlock>

With secondary

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

With description and secondary

(vertical only)
42
Input features goes here
Code Editor
<FieldBlock
  label="Label text"
  labelDescription="Description text"
  labelSecondary="42"
>
  Input features goes here
</FieldBlock>

Group multiple fields

For your information
Code Editor
<FieldBlock label="Label text" info="For your information">
  <Flex.Horizontal>
    <Field.String width="small" minLength={3} />
    <Field.Number minimum={10} />
  </Flex.Horizontal>
</FieldBlock>

Combine error messages

Error messages from all fields inside the FieldBlock are combined as one message below the whole block

Code Editor
<FieldBlock>
  <Flex.Horizontal>
    <Field.Number width="small" label="Num" minimum={100} />
    <Field.String width="medium" label="Txt" minLength={5} />
  </Flex.Horizontal>
</FieldBlock>

Responsive forms

Label
Code Editor
<FieldBlock label="Label">
  <Flex.Container>
    <Flex.Item
      size={{
        small: 12,
        large: 'auto',
      }}
    >
      <Field.String
        path="/firstName"
        label="First name"
        width="medium"
        minLength={2}
      />
    </Flex.Item>
    <Flex.Item
      size={{
        small: 12,
        large: 'auto',
      }}
    >
      <Field.String
        path="/lastName"
        label="Last name"
        width="medium"
        required
      />
    </Flex.Item>
    <Flex.Item
      size={{
        small: 12,
        large: 'auto',
      }}
    >
      <FieldBlock width="large">
        <Slider
          min={1900}
          max={new Date().getFullYear()}
          step={1}
          value={2010}
          label="Birth year"
          label_direction="vertical"
          tooltip
          alwaysShowTooltip
        />
      </FieldBlock>
    </Flex.Item>
  </Flex.Container>
</FieldBlock>