Checkbox Group

View as Markdown

Checkbox Group component for grouping multiple checkboxes with multi-selection mode, supporting parent/child nesting.

Basic

Options
Show code
Hide code
 
import { CheckboxGroup } from '@mylighthouse/prism-react';
import { useState } from 'react';

export default function BasicExample(): React.ReactElement {
  const [value, setValue] = useState<string[]>(['a']);

  return (
    <CheckboxGroup onChange={setValue} value={value}>
      <CheckboxGroup.Legend>Options</CheckboxGroup.Legend>
      <CheckboxGroup.Item value="a">Option A</CheckboxGroup.Item>
      <CheckboxGroup.Item value="b">Option B</CheckboxGroup.Item>
      <CheckboxGroup.Item value="c">Option C</CheckboxGroup.Item>
    </CheckboxGroup>
  );
}

Nested Controls

Add allValues to CheckboxGroup and a parent item (without a value) to get a controlling parent checkbox.

Options
Show code
Hide code
 
import { CheckboxGroup } from '@mylighthouse/prism-react';
import { useState } from 'react';

const allOptions = ['a', 'b', 'c'];

export default function NestedExample(): React.ReactElement {
  const [value, setValue] = useState<string[]>(['a']);

  return (
    <CheckboxGroup allValues={allOptions} onChange={setValue} value={value}>
      <CheckboxGroup.Legend>Options</CheckboxGroup.Legend>
      <CheckboxGroup.Item parent>All options</CheckboxGroup.Item>
      <CheckboxGroup.Item nested value="a">
        Option A
      </CheckboxGroup.Item>
      <CheckboxGroup.Item nested value="b">
        Option B
      </CheckboxGroup.Item>
      <CheckboxGroup.Item nested value="c">
        Option C
      </CheckboxGroup.Item>
    </CheckboxGroup>
  );
}

Sizes

Set isSmall for more compact controls. Use for dense forms or table filters; keep default size for primary flows.

Default
Small
Show code
Hide code
 
import { CheckboxGroup } from '@mylighthouse/prism-react';
import { useState } from 'react';

export default function SizesExample(): React.ReactElement {
  const [defaultValue, setDefaultValue] = useState<string[]>([]);
  const [smallValue, setSmallValue] = useState<string[]>([]);

  return (
    <>
      <CheckboxGroup onChange={setDefaultValue} value={defaultValue}>
        <CheckboxGroup.Legend>Default</CheckboxGroup.Legend>
        <CheckboxGroup.Item value="a">Option A</CheckboxGroup.Item>
        <CheckboxGroup.Item value="b">Option B</CheckboxGroup.Item>
      </CheckboxGroup>
      <CheckboxGroup isSmall onChange={setSmallValue} value={smallValue}>
        <CheckboxGroup.Legend>Small</CheckboxGroup.Legend>
        <CheckboxGroup.Item value="a">Option A</CheckboxGroup.Item>
        <CheckboxGroup.Item value="b">Option B</CheckboxGroup.Item>
      </CheckboxGroup>
    </>
  );
}

Disabled

Disabled checkboxes have a subdued background and do not allow focus or pointer interactions.

Group disabled
Item disabled
Show code
Hide code
 
import { CheckboxGroup } from '@mylighthouse/prism-react';
import { useState } from 'react';

export default function DisabledExample(): React.ReactElement {
  const [groupValue, setGroupValue] = useState<string[]>(['a']);
  const [itemValue, setItemValue] = useState<string[]>(['a']);

  return (
    <>
      <CheckboxGroup disabled onChange={setGroupValue} value={groupValue}>
        <CheckboxGroup.Legend>Group disabled</CheckboxGroup.Legend>
        <CheckboxGroup.Item value="a">Option A</CheckboxGroup.Item>
        <CheckboxGroup.Item value="b">Option B</CheckboxGroup.Item>
        <CheckboxGroup.Item value="c">Option C</CheckboxGroup.Item>
      </CheckboxGroup>
      <CheckboxGroup onChange={setItemValue} value={itemValue}>
        <CheckboxGroup.Legend>Item disabled</CheckboxGroup.Legend>
        <CheckboxGroup.Item value="a">Option A</CheckboxGroup.Item>
        <CheckboxGroup.Item disabled value="b">
          Option B
        </CheckboxGroup.Item>
        <CheckboxGroup.Item value="c">Option C</CheckboxGroup.Item>
      </CheckboxGroup>
    </>
  );
}

API Reference

CheckboxGroup

Name Default Type Description
onChange * -- (value: string[]) => void --
value * -- string[] --
allValues -- string[] --
className -- string --
disabled -- boolean --
isSmall -- boolean --

CheckboxGroup.Item

Name Default Type Description
disabled -- boolean --
nested -- boolean --
parent -- true --
value -- string --

CheckboxGroup.Legend

No component-specific props