CheckboxGrid — Design System

In context

Permissions matrix, plan features comparison, supported-locale picker, and a single-column channel list.

Permissions

3 of 16 enabled

Three-column grid with built-in filter and select-all.

3 selected·13 remaining

Supported locales

5 active

Long list with a scroll-bounded `maxHeight`.

5 selected·18 remaining

New locales appear in the customer-facing UI within 4 hours.

Basic

0 selected·6 remaining

import { useState } from 'react';
import { CheckboxGrid } from '@mihcm/ui/CheckboxGrid';
 
const CATEGORIES = ['Engineering', 'Product', 'Design', 'Marketing', 'Sales', 'Support'];
const [selected, setSelected] = useState<Record<string, boolean>>({});
 
<CheckboxGrid
  items={CATEGORIES}
  selected={selected}
  onSelectedChange={setSelected}
/>

Single column (narrow container)

0 selected·6 remaining

<CheckboxGrid
  items={items}
  selected={selected}
  onSelectedChange={setSelected}
  columns={1}
/>

With pre-selected items

2 selected·4 remaining

const [selected, setSelected] = useState<Record<string, boolean>>({
  Engineering: true,
  Product: true,
});

Custom placeholder + height

<CheckboxGrid
  items={DESIGNATIONS}
  selected={selected}
  onSelectedChange={setSelected}
  searchPlaceholder="Filter designations…"
  maxHeight={320}
/>

Reading back the selection

const selectedItems = Object.keys(selected).filter((k) => selected[k]);
// → ['Engineering', 'Product']