wix-style-react/src/Checkbox/docs/Checkbox.demo.js

wix-style-react

import React from 'react';
import { StorybookComponents } from 'wix-storybook-utils/StorybookComponents';
import Checkbox from '..';

export default () => {
  const checkboxes = [
    {
      id: 'theater',
      label: 'Theater',
      initialValue: true,
    },
    {
      id: 'architecture',
      label: 'Architecture',
      initialValue: true,
    },
    {
      id: 'music',
      label: 'Music',
      initialValue: true,
    },
    {
      id: 'sports',
      label: 'Sports',
      initialValue: false,
    },
  ];

  return (
    <StorybookComponents.Stack gap="12px" flexDirection="column">
      {checkboxes.map(item => {
        const [checked, setChecked] = React.useState(item.initialValue);

        return (
          <Checkbox
            id={item.id}
            checked={checked}
            onChange={() => setChecked(!checked)}
          >
            {item.label}
          </Checkbox>
        );
      })}
    </StorybookComponents.Stack>
  );
};