Form

<Form> is a container which displays a set of related user input fields in a structured way. It can contain one or more of the following form components:

<TextField>
<MultilineTextField>
<Checkbox>
<Radio>
<RadioGroup>
<Switch>
<Select>
<Dropdown>

The component supports different type of layouts which can be specified through the layoutType prop.

Usage

import { Form } from 'nr1';

Examples

Default layout

<Form>
  <TextField placeholder="AAA Production" label="Name" />
  <Select label="Select account">
    <SelectItem>Option 1</SelectItem>
    <SelectItem>Option 2</SelectItem>
  </Select>
  <TextField
    defaultValue="help-production-db"
    label="Help channel"
    invalid="Please enter a valid slack channel"
  />
  <MultilineTextField
    label="Description"
    info="Info tooltip"
    placeholder="Placeholder text"
  />
  <Button
    type={Button.TYPE.PRIMARY}
    sizeType={Button.SIZE_TYPE.SMALL}
    spacingType={[
      HeadingText.SPACING_TYPE.EXTRA_LARGE,
      HeadingText.SPACING_TYPE.NONE,
    ]}
  >
    Create dashboard
  </Button>
</Form>;

Split layout

<Form layoutType={Form.LAYOUT_TYPE.SPLIT}>
  <TextField placeholder="AAA Production" label="Name" />
  <Select label="Select account">
    <SelectItem>Option 1</SelectItem>
    <SelectItem>Option 2</SelectItem>
  </Select>
  <TextField
    defaultValue="help-production-db"
    label="Help channel"
    invalid="Please enter a valid slack channel"
  />
  <MultilineTextField
    label="Description"
    info="Info tooltip"
    placeholder="Placeholder text"
  />
  <Button
    type={Button.TYPE.PRIMARY}
    sizeType={Button.SIZE_TYPE.SMALL}
    spacingType={[
      HeadingText.SPACING_TYPE.EXTRA_LARGE,
      HeadingText.SPACING_TYPE.NONE,
    ]}
  >
    Create dashboard
  </Button>
</Form>;

Split layout with size type

<Form
  layoutType={Form.LAYOUT_TYPE.SPLIT}
  splitSizeType={Form.SPLIT_SIZE_TYPE.LARGE}
>
  <TextField placeholder="AAA Production" label="Name" />
  <Select label="Select account">
    <SelectItem>Option 1</SelectItem>
    <SelectItem>Option 2</SelectItem>
  </Select>
  <TextField
    defaultValue="help-production-db"
    label="Help channel"
    invalid="Please enter a valid slack channel"
  />
  <MultilineTextField
    label="Description"
    info="Info tooltip"
    placeholder="Placeholder text"
  />
  <Button
    type={Button.TYPE.PRIMARY}
    sizeType={Button.SIZE_TYPE.SMALL}
    spacingType={[
      HeadingText.SPACING_TYPE.EXTRA_LARGE,
      HeadingText.SPACING_TYPE.NONE,
    ]}
  >
    Create dashboard
  </Button>
</Form>;

Form with required fields

<Form>
  <TextField required placeholder="AAA Production" label="Name" />
  <TextField defaultValue="help-production-db" label="Help channel" />
  <MultilineTextField
    label="Description"
    info="Info tooltip"
    placeholder="Placeholder text"
  />
  <Button
    type={Button.TYPE.PRIMARY}
    sizeType={Button.SIZE_TYPE.SMALL}
    spacingType={[
      HeadingText.SPACING_TYPE.EXTRA_LARGE,
      HeadingText.SPACING_TYPE.NONE,
    ]}
  >
    Create dashboard
  </Button>
</Form>;

Props

children

node

Form fields to display.

className

string

Appends class names to the component.Should be used only for positioning and spacing purposes.

layoutType

enum

Layout of the form:

Form.LAYOUT_TYPE.NORMAL: The form fields will be aligned vertically
Form.LAYOUT_TYPE.SPLIT: Except for Radio and Checkbox components, the form field labels will be placed on the left side and the input on the right.The SPLIT layout supports various sizes which can be specified through the splitSizeType prop.
<One ofForm.LAYOUT_TYPE.NORMALForm.LAYOUT_TYPE.SPLIT >

spacingType

enum[]

Spacing property. Spacing is defined as a tuple of zero to four values, which follow the same conventions as CSS properties like margin or padding. To omit a value, use SPACING_TYPE.OMIT.

<Array of<One ofForm.SPACING_TYPE.EXTRA_LARGE,
Form.SPACING_TYPE.LARGE,
Form.SPACING_TYPE.MEDIUM,
Form.SPACING_TYPE.NONE,
Form.SPACING_TYPE.OMIT,
Form.SPACING_TYPE.SMALL,
>
>

splitSizeType

enum

Specifies the size of the columns when using the split layout. <One of

Form.SPLIT_SIZE_TYPE.LARGE,
Form.SPLIT_SIZE_TYPE.MEDIUM,
Form.SPLIT_SIZE_TYPE.SMALL,

>

style

object

Inline style for custom styling.Should be used only for positioning and spacing purposes.

testId

string

Adds a data-test-id attribute. Use it to target the component in unit and E2E tests.For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.For example, my-nerdpack.some-element. Note: You might not see data-test-id attributes as they are removed from the DOM, to debug them pass a e2e-test query parameter to the URL.

Usage.css-21sua1{background:none;border:none;width:0;padding:0;}

Examples

Default layout

Split layout

Split layout with size type

Form with required fields

Props

node

string

enum

enum[]

enum

object

string

Usage