storybook/docs/snippets/angular/checkbox-story-starter-example.mdx.mdx

```md
<!-- Checkbox.stories.mdx -->

import { Canvas, Meta, Story } from '@storybook/addon-docs';

import { Checkbox } from './checkbox.component';

<Meta title="MDX/Checkbox" component={Checkbox} />

<!--
 👇 Render functions are a framework specific feature to allow you control on how the component renders.
  See https://storybook.js.org/docs/7.0/angular/api/csf
  to learn how to use render functions.
-->

<Canvas>
  <Story 
    name="MyStory"
    render={() => ({
      template: `
        <form>
          <Checkbox id="Unchecked" label="Unchecked" /> 
          <Checkbox id="Checked" label="Checked" checked /> 
          <Checkbox appearance="secondary" id="second" label="Secondary" checked /> 
        </form>`,
    })} >
  </Story>
</Canvas>
```