Toggle Board React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import ToggleBoard from "./ToggleBoard";

export default function Example() {
  return (
    <ToggleBoard
      items={[
        {
          "value": "grain",
          "label": "Grain"
        },
        {
          "value": "bloom",
          "label": "Bloom"
        },
        {
          "value": "motion",
          "label": "Motion"
        },
        {
          "value": "depth",
          "label": "Depth"
        },
        {
          "value": "texture",
          "label": "Texture"
        },
        {
          "value": "light",
          "label": "Light"
        }
      ]}
      defaultValue={[
        "grain",
        "motion",
        "light"
      ]}
      columns={3}
      color={"#d7a877"}
      label={"Effects"}
      disabled={false}
    />
  );
}

Using Toggle Board

Give each item a unique value and a short label. Each key is an independent pressed button, so multiple options can be selected at once.

Pass value and onValueChange to integrate the board with application state. Use item.disabled for individual unavailable choices or disabled for the entire group.

Props

Name	Type	Required	Default	Description
items	Array<{ value, label, icon?, disabled? }>	No	[]	Options with unique values and optional icons or disabled states.
value	Array<string>	No	undefined	Controlled array of selected values.
defaultValue	Array<string>	No	[]	Initial selected values in uncontrolled mode.
onValueChange	function	No	undefined	Receives the complete next array of selected values.
columns	number	No	3	Number of columns, from 1 to 6.
color	string	No	"#d7a877"	Illuminated indicator and focus colour.
label	string	No	"Options"	Accessible group label.
disabled	boolean	No	false	Disable every key.
className	string	No	""	Additional classes on the root element.
style	CSSProperties	No	undefined	Inline styles for sizing, typography and appearance.