Chip

This packages exposes components that helps users make selects, enter information or filter content.

The Chip component can be used in different use cases as it provides a convenient option for displaying complex information in a compact form.

It is especially useful for representing an entity which can be added or removed from a list.

MenuChip

This component is supposed to be used as a trigger for opening menus. It's meant to replace all usage of ActionButton and custom implementations as triggers.

Basic usage

The usage below is showed in isolation for demo purposes. This component should never be used by itself, it should always be composed together with a menu.

Note: Do not use this component as a button.

const [open, setOpen] = React.useState(false);
return (
  <MenuChip
    label="Flavor"
    aria-expanded={open}
    onClick={() => setOpen((v) => !v)}
  />
);

variant

This component comes with two variants: filled and outline.

The default value is filled.

<Inline gap="large">
  <MenuChip label="Flavor" aria-expanded={false} onClick={() => {}} />
  <MenuChip
    variant="outline"
    label="Flavor"
    aria-expanded={false}
    onClick={() => {}}
  />
</Inline>

label

The label of the menu.

Labels should be kept short and not contain phrases or actions. Use plural form for multi select menus.

size

This component comes in two sizes: small and medium.

The default value is medium.

aria-expanded

The open/closed state of the menu.

Because this component is meant to be composed with a menu, we need to use aria attributes to control various states instead of a conventional boolean like isOpen.

hasValue

Tells the component if the menu has a value selected.

disabled

Makes the tirggered disabled so that the user is unable to access the menu.

iconBefore

Renders an icon before the label. When the hasValue prop is true, this icon gets replaced by a tick icon to show that the menu has a selection.

selectionCount

Show the number of selections when a multi select menu has a large number of selections.

<MenuChip
  label="Flavors"
  aria-expanded={false}
  onClick={() => setOpen((v) => !v)}
  hasValue={true}
  selectionCount={6}
/>

onClick

This component is rendered as a button so the onClick handler is required.

onClear

Optionally provide a function to clear the select directly from the trigger. This renders a delete button inside the trigger.

MenuChip recipes

Single select menu

const flavours = ['Chocolate', 'Vanilla', 'Strawberry', 'Caramel', 'Mint'];
const [selected, setSelected] = useState();
const identity = (i: any) => {
  return i;
};
return (
  <SelectMenu
    trigger={({ isOpen, hasValue, triggerProps }) => {
      return (
        <MenuChip
          label={`Flavor ${selected ? `: ${selected}` : ''}`}
          hasValue={hasValue}
          {...triggerProps}
          aria-expanded={isOpen}
          onClear={() => {
            setSelected(undefined);
          }}
        />
      );
    }}
    onChange={setSelected}
    options={flavours}
    itemToLabel={identity}
    itemToValue={identity}
    value={selected}
  />
);

Multi select menu

const flavours = ['Chocolate', 'Vanilla', 'Strawberry', 'Caramel', 'Mint'];
const [selected, setSelected] = useState([]);
const identity = (i) => {
  return i;
};
const negate = (predicate) => {
  return (...args) => {
    return !predicate(...args);
  };
};
const handleChange = (value) => {
  const some = (item) => {
    return item === value;
  };
  const none = negate(some);
  if (selected.some(some)) {
    setSelected((old) => {
      return old.filter(none);
    });
  } else {
    setSelected((old) => {
      return old.concat(value);
    });
  }
};
const label =
  selected.length === 0
    ? 'Flavors'
    : selected.length < 3
    ? `Flavors: ${selected.join(',')}`
    : 'Flavors';
return (
  <SelectMenu
    trigger={({ isOpen, hasValue, triggerProps }) => {
      return (
        <MenuChip
          label={label}
          selectionCount={selected.length < 3 ? 0 : selected.length}
          hasValue={hasValue}
          {...triggerProps}
          aria-expanded={isOpen}
          onClear={() => {
            setSelected([]);
          }}
        />
      );
    }}
    onChange={handleChange}
    options={flavours}
    itemToLabel={identity}
    itemToValue={identity}
    value={selected}
  />
);

FilterChipRadioGroup

This component helps the user make a single selection from a small list of items, it is implemented as a radio group under the hood.

This component has the same variant and size props from above.

Note: Do not use this component if there are more than 5 items to choose from.

Basic usage

const options = [
  { label: 'Earnings', value: 'Earnings' },
  { label: 'Allowances', value: 'Allowances' },
  { label: 'Deductions', value: 'Deductions', disabled: true },
  { label: 'Superannuation', value: 'Superannuation' },
];
const [selected, setSelected] = useState(0);
return (
  <FilterChipRadioGroup
    legend="Flavors"
    options={options}
    value={selected}
    onChange={setSelected}
  />
);

legend

Since this component is implemented as a radio group, we need a label for the underlying fieldset. This label will not be shown to the user, it's only there for accessibility purpose.

options

List of options that are presented to the user in the following shape:

type Options = Array<{ label: string; value: Value; disabled?: boolean }>;

value

The current value of the radio group.

onChange

Event handler for when user makes a selection.

FilterChipCheckboxGroup

This component helps the user make multiple selections from a small list of items, it is implemented as a checkbox group under the hood.

This component has the same variant and size props from above.

Note: Do not use this component if there are more than 5 items to choose from.

Basic usage

const options = [
  { label: 'Earnings', value: 'Earnings' },
  { label: 'Allowances', value: 'Allowances' },
  { label: 'Deductions', value: 'Deductions', disabled: true },
  { label: 'Superannuation', value: 'Superannuation' },
];
const [selected, setSelected] = useState(['Allowances']);
return (
  <FilterChipCheckboxGroup
    legend="Pay items"
    options={options}
    value={selected}
    onChange={setSelected}
  />
);

legend

Since this component is implemented as a checkbox group, we need a label for the underlying fieldset. This label will not be shown to the user, it's only there for accessibility purpose.

options

List of options that are presented to the user in the following shape:

type Options = Array<{ label: string; value: Value; disabled?: boolean }>;

value

The current value of the checkbox group.

onChange

Event handler for when user makes a selection.