SelectableBox

A box that has selection states. It can be used as an alternative to a radio button or checkbox set.

The SelectableBox can contain any kind of content as long as it is not clickable. In other words, there should be no clickable targets distinct from selection.

Basic Usage

As Checkbox

() => {
  const type = 'checkbox';
  const allCheeseOptions = ['swiss', 'cheddar', 'pepperjack'];
  const [checkedCheeses, { add, remove, set, clear }] = useCheckboxSetValues(['swiss']);

  const handleChange = e => {
    e.target.checked ? add(e.target.value) : remove(e.target.value);
  };
  
  const isInvalid = () => checkedCheeses.includes('swiss');
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
  
  return (
    <SelectableBox.Set
      value={checkedCheeses}
      type={type}
      onChange={handleChange}
      name="cheeses"
      columns={isExtraSmall ? 1 : 2}
    >
      <SelectableBox value="swiss" type={type} aria-label="checkbox">
        <div>
          <h3>It is my first SelectableBox</h3>
          <p>Swiss</p>
        </div>
      </SelectableBox>
      <SelectableBox value="cheddar" inputHidden={false} type={type} aria-label="checkbox">
        Cheddar
      </SelectableBox>
      <SelectableBox
        value="pepperjack"
        inputHidden={false}
        type={type}
        isInvalid={isInvalid()}
        aria-label="checkbox"
      >
        <h3>Pepperjack</h3>
      </SelectableBox>
    </SelectableBox.Set>
  );
}

() => {
  const type = 'checkbox';
  const allCheeseOptions = ['swiss', 'cheddar', 'pepperjack'];
  const [checkedCheeses, { add, remove, set, clear }] = useCheckboxSetValues(['swiss']);

  const handleChange = e => {
    e.target.checked ? add(e.target.value) : remove(e.target.value);
  };
  
  const isInvalid = () => checkedCheeses.includes('swiss');
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
  
  return (
    <SelectableBox.Set
      value={checkedCheeses}
      type={type}
      onChange={handleChange}
      name="cheeses"
      columns={isExtraSmall ? 1 : 2}
    >
      <SelectableBox value="swiss" type={type} aria-label="checkbox">
        <div>
          <h3>It is my first SelectableBox</h3>
          <p>Swiss</p>
        </div>
      </SelectableBox>
      <SelectableBox value="cheddar" inputHidden={false} type={type} aria-label="checkbox">
        Cheddar
      </SelectableBox>
      <SelectableBox
        value="pepperjack"
        inputHidden={false}
        type={type}
        isInvalid={isInvalid()}
        aria-label="checkbox"
      >
        <h3>Pepperjack</h3>
      </SelectableBox>
    </SelectableBox.Set>
  );
}

As Radio

() => {
  const type = 'radio';
  const [value, setValue] = useState('green');
  const handleChange = e => setValue(e.target.value);
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });

  return (
    <SelectableBox.Set
      type={type}
      value={value}
      onChange={handleChange}
      name="colors"
      columns={isExtraSmall ? 1 : 3}
    >
      <SelectableBox value="red" type={type} aria-label="checkbox">
        <div>
          <h3>It is Red color</h3>
          <p>Select me</p>
        </div>
      </SelectableBox>
      <SelectableBox value="green" inputHidden={false} type={type} aria-label="checkbox">
        <h3>Green</h3>
        <p>Leaves and grass</p>
      </SelectableBox>
      <SelectableBox value="blue" inputHidden={false} type={type} aria-label="checkbox">
        <h3>Blue</h3>
        <p>The sky</p>
      </SelectableBox>
    </SelectableBox.Set>
  );
}

() => {
  const type = 'radio';
  const [value, setValue] = useState('green');
  const handleChange = e => setValue(e.target.value);
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });

  return (
    <SelectableBox.Set
      type={type}
      value={value}
      onChange={handleChange}
      name="colors"
      columns={isExtraSmall ? 1 : 3}
    >
      <SelectableBox value="red" type={type} aria-label="checkbox">
        <div>
          <h3>It is Red color</h3>
          <p>Select me</p>
        </div>
      </SelectableBox>
      <SelectableBox value="green" inputHidden={false} type={type} aria-label="checkbox">
        <h3>Green</h3>
        <p>Leaves and grass</p>
      </SelectableBox>
      <SelectableBox value="blue" inputHidden={false} type={type} aria-label="checkbox">
        <h3>Blue</h3>
        <p>The sky</p>
      </SelectableBox>
    </SelectableBox.Set>
  );
}

As Checkbox with isIndeterminate

() => {
  const type = 'checkbox';
  const allCheeseOptions = ['swiss', 'cheddar', 'pepperjack'];
  const [checkedCheeses, { add, remove, set, clear }] = useCheckboxSetValues(['swiss']);

  const allChecked = allCheeseOptions.every(value => checkedCheeses.includes(value));
  const someChecked = allCheeseOptions.some(value => checkedCheeses.includes(value));
  const isIndeterminate = someChecked && !allChecked;
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.small.maxWidth });

  const handleChange = e => {
    e.target.checked ? add(e.target.value) : remove(e.target.value);
  };

  const handleCheckAllChange = ({ checked }) => {
    checked ? set(allCheeseOptions) : clear();
  };

  return (
    <>
      <div className="mb-3">
        <SelectableBox
          checked={allChecked}
          isIndeterminate={isIndeterminate}
          onClick={handleCheckAllChange}
          inputHidden={false}
          type={type}
          aria-label="checkbox"
        >
          All the cheese
        </SelectableBox>
      </div>
      <SelectableBox.Set
        value={checkedCheeses}
        type={type}
        onChange={handleChange}
        name="cheeses"
        columns={isExtraSmall ? 1 : 3}
      >
        <SelectableBox value="swiss" type={type} aria-label="checkbox">
          <div>
            <h3>It is my first SelectableBox</h3>
            <p>Swiss</p>
          </div>
        </SelectableBox>
        <SelectableBox value="cheddar" inputHidden={false} type={type} aria-label="checkbox">
          Cheddar
        </SelectableBox>
        <SelectableBox value="pepperjack" inputHidden={false} type={type} aria-label="checkbox">
          <h3>Pepperjack</h3>
        </SelectableBox>
      </SelectableBox.Set>
    </>
  );
}

() => {
  const type = 'checkbox';
  const allCheeseOptions = ['swiss', 'cheddar', 'pepperjack'];
  const [checkedCheeses, { add, remove, set, clear }] = useCheckboxSetValues(['swiss']);

  const allChecked = allCheeseOptions.every(value => checkedCheeses.includes(value));
  const someChecked = allCheeseOptions.some(value => checkedCheeses.includes(value));
  const isIndeterminate = someChecked && !allChecked;
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.small.maxWidth });

  const handleChange = e => {
    e.target.checked ? add(e.target.value) : remove(e.target.value);
  };

  const handleCheckAllChange = ({ checked }) => {
    checked ? set(allCheeseOptions) : clear();
  };

  return (
    <>
      <div className="mb-3">
        <SelectableBox
          checked={allChecked}
          isIndeterminate={isIndeterminate}
          onClick={handleCheckAllChange}
          inputHidden={false}
          type={type}
          aria-label="checkbox"
        >
          All the cheese
        </SelectableBox>
      </div>
      <SelectableBox.Set
        value={checkedCheeses}
        type={type}
        onChange={handleChange}
        name="cheeses"
        columns={isExtraSmall ? 1 : 3}
      >
        <SelectableBox value="swiss" type={type} aria-label="checkbox">
          <div>
            <h3>It is my first SelectableBox</h3>
            <p>Swiss</p>
          </div>
        </SelectableBox>
        <SelectableBox value="cheddar" inputHidden={false} type={type} aria-label="checkbox">
          Cheddar
        </SelectableBox>
        <SelectableBox value="pepperjack" inputHidden={false} type={type} aria-label="checkbox">
          <h3>Pepperjack</h3>
        </SelectableBox>
      </SelectableBox.Set>
    </>
  );
}

Theme Variables (SCSS)#

$selectable-box-padding:                   1rem !default;
$selectable-box-border-radius:             .25rem !default;
$selectable-box-space:                     .75rem !default;
$min-cols-number:                          1 !default;
$max-cols-number:                          12 !default;

SelectableBox Props API

children node Required Required
Content of the SelectableBox.
value string Required | number Required Required
A value that is passed to the input tag.
checked bool Required
Controls whether SelectableBox is checked.
Defaultfalse
type enum Required'radio' | 'checkbox'
Indicates the input type: checkbox or radio.
Default'radio'
onClick func Required
Function that is called when the SelectableBox is clicked.
Default() => {}
onFocus func Required
Function that is called when the SelectableBox is focused.
Default() => {}
inputHidden bool Required
Controls display of the input (checkbox or radio button) on the SelectableBox.
Defaulttrue
isIndeterminate bool Required
Indicates a state for the 'checkbox' type when SelectableBox is neither checked nor unchecked.
Defaultfalse
isInvalid bool Required
Adds errors styles to the SelectableBox.
Defaultfalse
className string Required
A class that is appended to the base element.

SelectableBoxSet Props API

name string Required Required
Specifies a name for the group of SelectableBox'es.
children node Required
Content of the SelectableBoxSet.
onChange func Required
A function that receives event of the clicked SelectableBox and can be used to handle the value change.
Default() => {}
value string Required | number Required | array Required Required
Indicates selected SelectableBox'es.
defaultValue string Required | number Required Required
Specifies default values for the SelectableBox'es.
type enum Required'radio' | 'checkbox'
Indicates the input type: checkbox or radio.
Default'radio'
columns number Required
Specifies number of SelectableBox'es in a row.
Class that is responsible for the columns number: pgn__selectable_box-set--{columns}. Max number of columns: 12.
Default2
className string Required
A class that is be appended to the base element.

Paragon Design System

SelectableBox

Basic Usage

Theme Variables (SCSS)#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

SelectableBox

Basic Usage#

Theme Variables (SCSS)#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

Basic Usage