FieldGroup

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.

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

<FieldGroup label='Withdraw money'>
  <Select label='amount of dollars' hideLabel placeholder='Select amount' options={amountValues} />
  <FieldGroup.Item>
    <Icon icon={faDollarSign} widthAuto />
  </FieldGroup.Item>
</FieldGroup>
<FieldGroup label='Url'>
  <FieldGroup.Item>https://</FieldGroup.Item>
  <Input label='Url excluding https:// prefix' hideLabel placeholder="example.com" />
</FieldGroup>

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

Description

Optionally provide additional information with a description.

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

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.

<FieldGroup
  label="Submit your email"
  feedback="Missing email"
  state="alert"
  required
>
  <Input label="email" hideLabel placeholder="bilbo.baggins" />
  <Select label="domain" hideLabel placeholder="@gmail" options={domains} />
</FieldGroup>
<FieldGroup
  label="Submit your email"
  feedback="Missing email"
  state="alert"
  required
>
  <Input label="email" hideLabel placeholder="bilbo.baggins" />
  <Select label="domain" hideLabel placeholder="@gmail" options={domains} />
</FieldGroup>

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.

<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>
<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>

Small fields

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

<FieldGroup label="Small url">
  <FieldGroup.Item small>https://</FieldGroup.Item>
  <Input
    small
    label="Url excluding https:// prefix"
    hideLabel
    placeholder="example.com"
  />
</FieldGroup>
<FieldGroup label="Withdraw small money">
  <Select
    small
    label="amount of dollars"
    hideLabel
    placeholder="Select amount"
    options={amountValues}
  />
  <FieldGroup.Item small>
    <Icon icon={faDollarSign} widthAuto />
  </FieldGroup.Item>
</FieldGroup>
<FieldGroup label="Small url">
  <FieldGroup.Item small>https://</FieldGroup.Item>
  <Input
    small
    label="Url excluding https:// prefix"
    hideLabel
    placeholder="example.com"
  />
</FieldGroup>
<FieldGroup label="Withdraw small money">
  <Select
    small
    label="amount of dollars"
    hideLabel
    placeholder="Select amount"
    options={amountValues}
  />
  <FieldGroup.Item small>
    <Icon icon={faDollarSign} widthAuto />
  </FieldGroup.Item>
</FieldGroup>

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.

<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>
<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 on those components as well as on FieldGroup.

<FieldGroup disabled label="Url">
  <FieldGroup.Item>https://</FieldGroup.Item>
  <Input
    label="Url excluding https:// prefix"
    value="bifrost.intility.com"
    hideLabel
  />
</FieldGroup>
<FieldGroup disabled label="Submit your email">
  <Input label="email" hideLabel placeholder="bilbo.baggins" />
  <Select
    isDisabled
    label="domain"
    hideLabel
    placeholder="@gmail.com"
    options={[
      { value: "@gmail.com", label: "@gmail.com" },
      { value: "@intility.no", label: "@intility.no" },
      { value: "@hotmail.com", label: "@hotmail.com" },
    ]}
  />
</FieldGroup>
<FieldGroup disabled label="Url">
  <FieldGroup.Item>https://</FieldGroup.Item>
  <Input
    label="Url excluding https:// prefix"
    value="bifrost.intility.com"
    hideLabel
  />
</FieldGroup>
<FieldGroup disabled label="Submit your email">
  <Input label="email" hideLabel placeholder="bilbo.baggins" />
  <Select
    isDisabled
    label="domain"
    hideLabel
    placeholder="@gmail.com"
    options={[
      { value: "@gmail.com", label: "@gmail.com" },
      { value: "@intility.no", label: "@intility.no" },
      { value: "@hotmail.com", label: "@hotmail.com" },
    ]}
  />
</FieldGroup>

Sandbox

import { useState } from "react";
import { faSearch } from "@fortawesome/free-solid-svg-icons";
import FieldGroup from "@intility/bifrost-react/FieldGroup";
import Input from "@intility/bifrost-react/Input";
import Select from "@intility/bifrost-react-select";

const professions = [
  { value: "Wizard", label: "Wizard" },
  { value: "Hobbit", label: "Hobbit" },
  { value: "Dwarf", label: "Dwarf" },
];

export default function FieldGroupDemo() {
  const [value, setValue] = useState("");

  return (
    <FieldGroup label="Search for character">
      <Select
        label="Filter by profession"
        hideLabel
        placeholder="Profession"
        options={professions}
      />
      <Input
        label="Search for character"
        hideLabel
        placeholder="Ex. Bilbo Baggins"
        clearable
        icon={faSearch}
        value={value}
        onChange={(e) => setValue(e.target.value)}
        onIconClick={() => console.log("search")}
        rightIcon
      />
    </FieldGroup>
  );
}