Checkbox

Playground

'use client';
import { useEffect, useRef, useState } from 'react';
import { Checkbox, type CheckboxShape } from '@mbsw/ui';
export default function Demo() {
  const settings = {
    "selection": "checked",
    "shape": "square",
    "disabled": false
  };
  const initial =
    settings.selection === 'indeterminate'
      ? 'indeterminate'
      : settings.selection === 'checked';
  const [checked, setChecked] = useState<boolean | 'indeterminate'>(initial);
  const previousSetting = useRef(initial);
  useEffect(() => {
    if (previousSetting.current === initial) return;
    previousSetting.current = initial;
    setChecked(initial);
  }, [initial]);
  return (
    <Checkbox
      aria-label={"Selection"}
      checked={checked}
      onCheckedChange={(next) => {
        setChecked(next);
        const selection =
          next === 'indeterminate'
            ? 'indeterminate'
            : next
              ? 'checked'
              : 'unchecked';
      }}
      disabled={settings.disabled}
      shape={settings.shape as CheckboxShape}
    />
  );
}

Properties

Shape

Checked

Disabled

Usage

Set checked to true, false or indeterminate. Use indeterminate when some, but not all, items in a group are selected.

'use client';
import { Checkbox } from '@mbsw/ui';

export default function Example() {
  return (
    <label>
      <Checkbox defaultChecked /> {"Selection"}
    </label>
  );
}

The Playground Code tab includes the full example with your current settings. See Installation for the CSS imports.

Composition

Checkbox