Components

InputGroup

Puts a text control and its addons before, after, above or below it in one box.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it in Storybook to use the controls.

Live example, StorybookOpen in Storybook

Default

InputGroup puts InputGroup.Input and its addons in one bordered box. InputGroup.Text is for prefix and suffix text.

Field label

https://

.com

Help text goes here.

import { InputGroup } from '@bigbang/ui';

export default function Default() {
  return (
    <div className="max-w-96">
      <InputGroup label="Field label" description="Help text goes here.">
        <InputGroup.Addon>
          <InputGroup.Text>https://</InputGroup.Text>
        </InputGroup.Addon>
        <InputGroup.Input />
        <InputGroup.Addon align="inline-end">
          <InputGroup.Text>.com</InputGroup.Text>
        </InputGroup.Addon>
      </InputGroup>
    </div>
  );
}

Icon and action

A start addon can hold a decorative icon, an end addon one small action. In the example the clear button shows while there is a value.

Field label

import { Icon, InputGroup } from '@bigbang/ui';
import { useState } from 'react';

export default function IconAndAction() {
  const [value, setValue] = useState('');
  return (
    <div className="max-w-96">
      <InputGroup label="Field label">
        <InputGroup.Addon>
          <Icon name="search" size="sm" />
        </InputGroup.Addon>
        <InputGroup.Input value={value} onValueChange={setValue} />
        {value ? (
          <InputGroup.Addon align="inline-end">
            <InputGroup.Button icon="x" label="Clear" onClick={() => setValue('')} />
          </InputGroup.Addon>
        ) : null}
      </InputGroup>
    </div>
  );
}

Unit

A unit in the end addon says what the value is measured in. size="lg" makes the row 40 px.

Field label

items

import { InputGroup } from '@bigbang/ui';

export default function Unit() {
  return (
    <div className="max-w-60">
      <InputGroup label="Field label" size="lg">
        <InputGroup.Input inputMode="numeric" />
        <InputGroup.Addon align="inline-end">
          <InputGroup.Text>items</InputGroup.Text>
        </InputGroup.Addon>
      </InputGroup>
    </div>
  );
}

Block addon

align="block-end" puts the addon on a full-width row below the control; it is for a toolbar under a text area.

Field label

import { InputGroup } from '@bigbang/ui';

export default function BlockAddon() {
  return (
    <div className="max-w-96">
      <InputGroup label="Field label">
        <InputGroup.Textarea rows={4} />
        <InputGroup.Addon align="block-end">
          <InputGroup.Button icon="copy" label="Copy" />
        </InputGroup.Addon>
      </InputGroup>
    </div>
  );
}

States

Required with an error, and disabled groups. Focus, error and disabled colours apply to the whole box.

Field label

https://

This field cannot be empty.

Field label

https://

import { InputGroup, Provider } from '@bigbang/ui';

export default function States() {
  return (
    <Provider locale="en-GB">
      <div className="flex max-w-96 flex-col gap-lg">
        <InputGroup label="Field label" required error="This field cannot be empty.">
          <InputGroup.Addon>
            <InputGroup.Text>https://</InputGroup.Text>
          </InputGroup.Addon>
          <InputGroup.Input required />
        </InputGroup>
        <InputGroup label="Field label" disabled>
          <InputGroup.Addon>
            <InputGroup.Text>https://</InputGroup.Text>
          </InputGroup.Addon>
          <InputGroup.Input />
        </InputGroup>
      </div>
    </Provider>
  );
}

Light and dark mode

Colours come from the color-border-*, color-surface-* and color-text-* tokens.

Field label

https://

This field cannot be empty.

Field label

https://

Field label

https://

This field cannot be empty.

Field label

https://

import { InputGroup, Provider } from '@bigbang/ui';

export default function States() {
  return (
    <Provider locale="en-GB">
      <div className="flex max-w-96 flex-col gap-lg">
        <InputGroup label="Field label" required error="This field cannot be empty.">
          <InputGroup.Addon>
            <InputGroup.Text>https://</InputGroup.Text>
          </InputGroup.Addon>
          <InputGroup.Input required />
        </InputGroup>
        <InputGroup label="Field label" disabled>
          <InputGroup.Addon>
            <InputGroup.Text>https://</InputGroup.Text>
          </InputGroup.Addon>
          <InputGroup.Input />
        </InputGroup>
      </div>
    </Provider>
  );
}