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

import { 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 -->

<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>    
    `,
  })} />
```