Skip to content
Home

General Demos

Base field components

Base field components are targeting the data type they produce. They can receive values and change handlers directly by props.

Code Editor
<Card stack>
  <Field.String
    label="Text field"
    value="Lorem Ipsum"
    onChange={(value) => console.log('onChange', value)}
  />
  <Field.Number
    label="Number Field"
    value={789}
    onChange={(value) => console.log('onChange', value)}
  />
  <Field.Boolean
    label="Boolean Field"
    value={true}
    onChange={(value) => console.log('onChange', value)}
  />
</Card>

Feature fields

Feature fields build on top of base field components and provide standard props for simplified form implementations.

Code Editor
<Card stack>
  <Field.String label="Fornavn" value="John" />
  <Field.String label="Etternavn" value="Smith" />
  <Field.NationalIdentityNumber value="20058512345" />
  <Field.Email value="john@smith.email" />
  <Field.PhoneNumber value="+47 98765432" />
</Card>

Layout components

Wrapping inputs in layout components provide the standard design without the need for local styles.

Profile

Name

More information

Using Form.Handler

Wrapping fields with a Form.Handler component lets them read and write data to one common data set, and have input and output of data in one place instead of connecting to every single field component.

Profile

Code Editor
<Form.Handler
  data={{
    firstName: 'John',
    lastName: 'Smith',
    ssn: '20058512345',
    email: 'john@smith.email',
    phone: '+47 98765432',
  }}
  onChange={(data) => console.log('onChange', data)}
  onPathChange={(path, value) => console.log('onPathChange', path, value)}
  onSubmit={(data) => console.log('onSubmit', data)}
>
  <Form.MainHeading>Profile</Form.MainHeading>

  <Card stack>
    <Field.String path="/firstName" label="Fornavn" />
    <Field.String path="/lastName" label="Etternavn" />
    <Field.NationalIdentityNumber path="/ssn" />
    <Field.Email path="/email" />
    <Field.PhoneNumber path="/phone" />

    <Form.ButtonRow>
      <Form.SubmitButton />
    </Form.ButtonRow>
  </Card>
</Form.Handler>

Visibility based on data

Some fields are displayed when data fill specific requirements.

Profile

Name

Code Editor
<Form.Handler
  data={{
    firstName: undefined,
    lastName: 'Smith',
    advanced: false,
    ssn: '123',
    email: '@smith.email',
    phone: '+47 98765432',
  }}
  onChange={(data) => console.log('onChange', data)}
  onPathChange={(path, value) => console.log('onPathChange', path, value)}
  onSubmit={(data) => console.log('onSubmit', data)}
>
  <Flex.Stack>
    <Form.MainHeading>Profile</Form.MainHeading>

    <Card stack>
      <Form.SubHeading>Name</Form.SubHeading>

      <Field.String path="/firstName" label="Fornavn" />
      <Field.String path="/lastName" label="Etternavn" />
    </Card>
  </Flex.Stack>
  <Field.Boolean
    path="/advanced"
    variant="checkbox-button"
    label="More fields"
  />
  <Visibility pathTrue="/advanced">
    <Flex.Stack>
      <Card stack>
        <Form.SubHeading>More information</Form.SubHeading>

        <Field.NationalIdentityNumber value="20058512345" />
        <Field.Email value="john@smith.email" />
        <Field.PhoneNumber value="+47 98765432" />
      </Card>
    </Flex.Stack>
  </Visibility>
</Form.Handler>

Validation

Here are some examples of validation properties of field components.

Profile

Code Editor
<Form.Handler
  data={{
    firstName: undefined,
    lastName: 'Smith',
    ssn: '123',
    email: '@smith.email',
    phone: '+47 98765432',
  }}
  onChange={(data) => console.log('onChange', data)}
  onPathChange={(path, value) => console.log('onPathChange', path, value)}
  onSubmit={(data) => console.log('onSubmit', data)}
>
  <Form.MainHeading>Profile</Form.MainHeading>

  <Card stack>
    <Field.String path="/firstName" label="Fornavn" required />
    <Field.String path="/lastName" label="Etternavn" required />
    <Field.NationalIdentityNumber path="/ssn" validateInitially />
    <Field.Email path="/email" validateInitially />
    <Field.PhoneNumber path="/phone" validateInitially />
  </Card>
</Form.Handler>

With steps

Some fields are displayed when data fill specific requirements.

Profile

Name

Code Editor
<Form.Handler
  data={{
    firstName: undefined,
    lastName: 'Smith',
    advanced: false,
    ssn: '123',
    email: '@smith.email',
    phone: '+47 98765432',
  }}
  onChange={(data) => console.log('onChange', data)}
  onPathChange={(path, value) => console.log('onPathChange', path, value)}
  onSubmit={(data) => console.log('onSubmit', data)}
>
  <StepsLayout mode="loose">
    <StepsLayout.Step title="Name">
      <Form.MainHeading>Profile</Form.MainHeading>

      <Card stack>
        <Form.SubHeading>Name</Form.SubHeading>

        <Field.String path="/firstName" label="Fornavn" required />
        <Field.String path="/lastName" label="Etternavn" required />
      </Card>

      <Form.ButtonRow>
        <StepsLayout.NextButton />
      </Form.ButtonRow>
    </StepsLayout.Step>

    <StepsLayout.Step title="More information">
      <Form.MainHeading>Profile</Form.MainHeading>

      <Card stack>
        <Form.SubHeading>More information</Form.SubHeading>

        <Field.NationalIdentityNumber path="/ssn" />
        <Field.Email path="/email" />
        <Field.PhoneNumber path="/phone" />
      </Card>

      <Form.ButtonRow>
        <StepsLayout.PreviousButton />
        <StepsLayout.NextButton />
      </Form.ButtonRow>
    </StepsLayout.Step>

    <StepsLayout.Step title="Summary">
      <Form.MainHeading>Profile</Form.MainHeading>

      <Card stack>
        <Flex.Container>
          <Value.String path="/firstName" label="Fornavn" />
          <Value.String path="/lastName" label="Etternavn" />
        </Flex.Container>

        <Value.NationalIdentityNumber path="/ssn" />
        <Value.Email path="/email" />
        <Value.PhoneNumber path="/phone" />
      </Card>

      <Form.ButtonRow>
        <StepsLayout.PreviousButton />
        <Form.SubmitButton />
      </Form.ButtonRow>
    </StepsLayout.Step>
  </StepsLayout>
</Form.Handler>