Bifrost Design System

Design React CSS

Figma

import FieldGroup from "@intility/bifrost-react/FieldGroup";

FieldGroup

Go to top

Props

Basic FieldGroup

FieldGroup supports grouping multiple Inputs or static text/icon together.

Currently supported children are:

<Input>
<Select>
<DatePicker>
<FieldGroup.Item>

Always include a (hidden) label per input field for accessibility.

TSX

<FieldGroup label='Url'>
  <FieldGroup.Item>https://</FieldGroup.Item>
  <Input label='Url excluding https:// prefix' hideLabel ... />
</FieldGroup>

<FieldGroup label='Withdraw money'>
  <Select label='amount of dollars' hideLabel ... />
  <FieldGroup.Item>
    <Icon icon={faDollarSign} widthAuto />
  </FieldGroup.Item>
</FieldGroup>

Url

https://

Withdraw money

Description

Optionally provide additional information with a description.

TSX

<FieldGroup label="Submit your email" description="Choose correct domain">
  <Input label="email" hideLabel placeholder="bilbo.baggins" />
  <Select label="domain" hideLabel placeholder="@gmail" options={...} />
</FieldGroup>

Submit your email

Choose correct domain

@gmail

Validation

FieldGroup can have state='alert'. Use feedback to provide additional information.

Preferably only do this after user has attempted to submit the form, see usage demo at Forms example.

TSX

<FieldGroup
  label="Submit your email"
  feedback="Missing email"
  state="alert"
  required
>

Submit your email(required)

@gmail

Missing email

Required fields

By using the required prop, the text "(required)" will be rendered after the FieldGroup label. If your form contains more required than optional fields, you can mark the optional fields with optional prop instead, making it easier for the user to scan the form.

When using <FieldGroup required>, also set required on child components to get required functionality.

TSX

<FieldGroup label='Name' required>
  <FieldGroup.Item>
    <Icon icon={faUser} widthAuto />
  </FieldGroup.Item>
  <Input required label='Name' hideLabel />
</FieldGroup>

<FieldGroup label='Email' optional>
  <Input label='email' hideLabel />
  <FieldGroup.Item>@online.com</FieldGroup.Item>
</FieldGroup>

Name(required)

Email(optional)

@online.com

Small fields

Inputs (and <FieldGroup.Item>) nested inside <FieldGroup> can be used with small prop to make the fields smaller.

TSX

<FieldGroup label="Small url">
  <FieldGroup.Item small>https://</FieldGroup.Item>
  <Input small ... />
</FieldGroup>

Small url

https://

Withdraw small money

Select amount

Read only

Using FieldGroup with readOnly prop will style <FieldGroup.Item> children as read-only.

For input and <DatePicker> also set readOnly prop on those components.

There is no readOnly <Select> prop.

TSX

<FieldGroup readOnly label="Url">
  <FieldGroup.Item>https://</FieldGroup.Item>
  <Input
    readOnly
    value="bifrost.intility.com"
    label="Url excluding https:// prefix"
    hideLabel
  />
</FieldGroup>
<FieldGroup readOnly label="Transfer amount">
  <FieldGroup.Item>
    US
    <Icon icon={faDollarSign} className="bfc-base-2" marginLeft widthAuto />
  </FieldGroup.Item>
  <Input readOnly label="email" hideLabel value="9001" />
</FieldGroup>

Disabled

Using FieldGroup with disabled prop will disable <Input> and <FieldGroup.Item> children.

If you are using <Select> or <DatePicker> as children you must remember to also use isDisabled / disabled prop respectively on those components as well as the FieldGroup.

TSX

<FieldGroup disabled label="Url">
  <FieldGroup.Item>https://</FieldGroup.Item>
  <Input label="Url" placeholder="example.com" hideLabel />
</FieldGroup>
<FieldGroup disabled label="Submit your email">
  <Input label="email" hideLabel placeholder="bilbo.baggins" />
  <Select isDisabled ... />
</FieldGroup>

Url

https://

Submit your email

@gmail.com