@wix/design-system/dist/docs/components/CheckToggleExamples.md

@wix/design-system

## Feature Examples


### Size
- description: Adjust the component size using the `size` prop. The prop supports two sizes:<br/> 
        &emsp;- `medium` - use where the component needs more emphasis<br/>
        &emsp;- `small` (default) - use in dense and compact layouts
- example: 
```jsx 
<StorybookComponents.Stack>
  <CheckToggle size="medium" checked />
  <CheckToggle size="small" checked />
</StorybookComponents.Stack>;
```

### Skin
- description: Style the component using the `skin` prop. This prop supports two skins:<br/>
        &emsp;- `standard` (default) - use in all common cases<br/>
        &emsp;- `success` - use to emphasize success states, such as <em>approved</em>
- example: 
```jsx 
<StorybookComponents.Stack>
  <CheckToggle skin="standard" checked />
  <CheckToggle skin="success" checked />
</StorybookComponents.Stack>;
```

### State
- description: Control the state of a component with:<br/>
        &emsp;- `checked` - use this state to mark an item as complete.<br/>
        &emsp;- `disabled` - disables all component interactions. Use it to highlight unavailable functions.
- example: 
```jsx 
<StorybookComponents.Stack flexDirection="column">
  <StorybookComponents.Stack>
    <FormField label="Default" labelPlacement="right">
      <CheckToggle default />
    </FormField>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <FormField label="Checked" labelPlacement="right">
      <CheckToggle checked />
    </FormField>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <FormField label="Disabled" labelPlacement="right">
      <CheckToggle disabled />
    </FormField>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <FormField label="Checked and disabled" labelPlacement="right">
      <CheckToggle disabled checked />
    </FormField>
  </StorybookComponents.Stack>
</StorybookComponents.Stack>;
```

### Tooltip
- description: Explain an action that's about to be performed with a descriptive message in a tooltip.
        Use the `tooltipContent` prop to pass the text to a tooltip.
- example: 
```jsx 
<StorybookComponents.Stack>
  <FormField
    label="Hover the check toggle to see a tooltip"
    labelPlacement="right"
  >
    <CheckToggle tooltipContent="Message explaining the action that will be performed" />
  </FormField>
</StorybookComponents.Stack>;
```




    


## Common Use Case Examples


### To-do list
- description: Use the check toggle to mark items as completed, e.g., in lists of to-do tasks.
- example: 
```jsx 
() => {
  const renderItem = ({ text, checked: initiallyChecked }) => {
    const [checked, setChecked] = React.useState(initiallyChecked);
    const options = [
      {
        value: (
          <CheckToggle
            checked={checked}
            onChange={() => setChecked(!checked)}
          />
        ),
        width: 'auto',
      },
      {
        value: (
          <Text light={checked} secondary={checked}>
            {checked ? <strike>{text}</strike> : text}
          </Text>
        ),
      },
      {
        value: (
          <PopoverMenu
            triggerElement={
              <IconButton size="small" priority="secondary">
                <Icons.MoreSmall />
              </IconButton>
            }
          >
            <PopoverMenu.MenuItem text="Edit" prefixIcon={<Icons.Edit />} />
            <PopoverMenu.MenuItem
              skin="destructive"
              text="Delete"
              prefixIcon={<Icons.Delete />}
            />
          </PopoverMenu>
        ),
        width: 'auto',
      },
    ];
    return (
      <TableListItem verticalPadding="small" showDivider options={options} />
    );
  };
  const options = [
    renderItem({ text: 'Define a user flow', checked: true }),
    renderItem({ text: 'Define the content', checked: false }),
    renderItem({ text: 'Prepare the wireframes', checked: false }),
  ];
  return (
    <Card>
      <Card.Header title="Tasks" />
      <Card.Divider />
      {options}
    </Card>
  );
};
```