Select

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

Live example, StorybookOpen in Storybook

Default

Select takes its options through items. While nothing is chosen, placeholder shows; clicking the trigger opens the list.

Field labelChoose

Help text goes here.

LightDark

Copy code

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

const items = [
  { value: 'one', label: 'First option' },
  { value: 'two', label: 'Second option' },
  { value: 'three', label: 'Third option', disabled: true },
];

export default function Default() {
  return (
    <div className="max-w-80">
      <Select label="Field label" items={items} placeholder="Choose" description="Help text goes here." />
    </div>
  );
}

Options with icons

When options have an icon, it shows before the label.

Field labelFirst option

LightDark

Copy code

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

const items = [
  { value: 'list', label: 'First option', icon: 'list' as const },
  { value: 'grid', label: 'Second option', icon: 'layout-grid' as const },
];

export default function WithIcons() {
  return (
    <div className="max-w-80">
      <Select label="Field label" items={items} defaultValue="list" />
    </div>
  );
}

Controlled

With value and onValueChange you hold the chosen value. With no choice the value is null.

Field labelChoose

null

LightDark

Copy code

import { Select } from '@bigbang/ui';
import { useState } from 'react';

const items = [
  { value: 'one', label: 'First option' },
  { value: 'two', label: 'Second option' },
  { value: 'three', label: 'Third option', disabled: true },
];

export default function Controlled() {
  const [value, setValue] = useState<string | null>(null);
  return (
    <div className="flex max-w-80 flex-col gap-sm">
      <Select label="Field label" items={items} placeholder="Choose" value={value} onValueChange={setValue} />
      <code className="type-body-sm text-fg-subtle">{String(value)}</code>
    </div>
  );
}

States

Required with an error, read-only and disabled fields.

Field label* requiredChoose

Choose an option.

Field labelFirst option

Field labelFirst option

LightDark

Copy code

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

const items = [
  { value: 'one', label: 'First option' },
  { value: 'two', label: 'Second option' },
  { value: 'three', label: 'Third option', disabled: true },
];

export default function States() {
  return (
    <Provider locale="en-GB">
      <div className="flex max-w-80 flex-col gap-lg">
        <Select label="Field label" items={items} placeholder="Choose" required error="Choose an option." />
        <Select label="Field label" items={items} defaultValue="one" readOnly />
        <Select label="Field label" items={items} defaultValue="one" disabled />
      </div>
    </Provider>
  );
}

Multiple selection

With multiple the user ticks more than one option; the list stays open after each choice and the trigger lists the chosen labels. Manage the value with values and onValuesChange. For long lists or when search helps, use a multiple Combobox.

Live example, StorybookOpen in Storybook

Light and dark mode

The trigger uses the input tokens; the list uses the shared popup surface: color-surface-raised, color-border-overlay and shadow-popup.

Light

Field label* requiredChoose

Choose an option.

Field labelFirst option

Field labelFirst option

Dark

Field label* requiredChoose

Choose an option.

Field labelFirst option

Field labelFirst option

Copy code

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

const items = [
  { value: 'one', label: 'First option' },
  { value: 'two', label: 'Second option' },
  { value: 'three', label: 'Third option', disabled: true },
];

export default function States() {
  return (
    <Provider locale="en-GB">
      <div className="flex max-w-80 flex-col gap-lg">
        <Select label="Field label" items={items} placeholder="Choose" required error="Choose an option." />
        <Select label="Field label" items={items} defaultValue="one" readOnly />
        <Select label="Field label" items={items} defaultValue="one" disabled />
      </div>
    </Provider>
  );
}