MultiStateCheckbox

import { MultiStateCheckbox } from 'fluxo-ui';

const states = [
  { value: null, label: 'No Selection', icon: undefined },
  { value: 'yes', label: 'Yes', icon: CheckIcon },
  { value: 'no', label: 'No', icon: MinusIcon },
];

function MyComponent() {
  const [value, setValue] = useState(null);

  return (
    <MultiStateCheckbox
      items={states}
      value={value}
      onChange={(e) => setValue(e.value)}
    />
  );
}

import { MultiStateCheckbox } from 'fluxo-ui';
import { InfoIcon, WarningIcon, FlagIcon, CheckIcon, MinusIcon } from 'fluxo-ui/icons';

const priorityStates = [
  { value: null, label: 'No Priority', icon: undefined },
  { value: 'low', label: 'Low', icon: InfoIcon },
  { value: 'medium', label: 'Medium', icon: WarningIcon },
  { value: 'high', label: 'High', icon: FlagIcon },
];

const approvalStates = [
  { value: 'pending', label: 'Pending', icon: InfoIcon },
  { value: 'approved', label: 'Approved', icon: CheckIcon },
  { value: 'rejected', label: 'Rejected', icon: MinusIcon },
  { value: 'flagged', label: 'Flagged', icon: FlagIcon },
];

function MyComponent() {
  const [priority, setPriority] = useState(null);
  const [approval, setApproval] = useState('pending');

  return (
    <>
      <MultiStateCheckbox
        items={priorityStates}
        value={priority}
        onChange={(e) => setPriority(e.value)}
      />
      <MultiStateCheckbox
        items={approvalStates}
        value={approval}
        onChange={(e) => setApproval(e.value)}
      />
    </>
  );
}

import { MultiStateCheckbox, Button } from 'fluxo-ui';

function MyComponent() {
  const [value, setValue] = useState(null);

  return (
    <div>
      <MultiStateCheckbox
        items={states}
        value={value}
        onChange={(e) => setValue(e.value)}
      />
      <Button label="Reset" onClick={() => setValue(null)} />
      <MultiStateCheckbox
        items={states}
        value={value}
        disabled
      />
    </div>
  );
}