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

wix-style-react

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

export default () => {
  const [selectedOptions, setSelectedOptions] = React.useState([]);

  return (
    <StorybookComponents.Stack flexDirection="column" width="50%">
      <FormField label="Country">
        <MultiSelectCheckbox
          placeholder="Select"
          options={[
            { value: 'Argentina', id: 'Argentina' },
            { value: 'Bolivia', id: 'Bolivia' },
            { value: 'China', id: 'China' },
            { value: 'Denmark', id: 'Denmark' },
            { value: 'Germany', id: 'Germany' },
            { value: 'Hungary', id: 'Hungary' },
            { value: 'Italy', id: 'Italy' },
            { value: 'Kenya', id: 'Kenya' },
            { value: 'Jordania', id: 'Jordania' },
          ]}
          selectedOptions={selectedOptions}
          onSelect={option => setSelectedOptions([...selectedOptions, option])}
          onDeselect={option =>
            setSelectedOptions(selectedOptions.filter(item => item !== option))
          }
        />
      </FormField>
    </StorybookComponents.Stack>
  );
};