@intility/bifrost-react/dist/components/FieldGroup/index.js

React library for Intility's design system, Bifrost.

import FieldGroup from "./FieldGroup.js";
import FieldGroupItem from "./FieldGroup.Item.js";
import { wrapClientComponent } from "../../utils/wrapClientComponent.js";

/**
 * Container for multiple inputs to be styled as a group. Supports the following
 * components as children:
 *
 * - `<Input>`
 * - `<Select>`
 * - `<Datepicker>`
 * - `<FieldGroup.Item>`
 *
 * @see https://bifrost.intility.com/react/fieldGroup
 *
 * @example
 * <FieldGroup label='Url'>
 *   <FieldGroup.Item>https://</FieldGroup.Item>
 *   <Input label='Url excluding https:// prefix' hideLabel placeholder="example.com" />
 * </FieldGroup>
 *
 * @example
 * <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>
 */
export default Object.assign(wrapClientComponent(FieldGroup, "FieldGroup"), {
  /**
   * Static child item in a FieldGroup (usually text or an icon)
   *
   * @example
   * <FieldGroup.Item>https://</FieldGroup.Item>
   *
   * @example
   * <FieldGroup.Item>
   *   <Icon icon={faDollarSign} widthAuto />
   * </FieldGroup.Item>
   */
  Item: FieldGroupItem
});