joyent-portal/packages/ui-toolkit/src/form/usage-checkbox.md

Checkbox > Default

const React = require('react');
const { default: FormGroup } = require('./group');
const { default: Label } = require('./label');
const { FormLabel, Checkbox } = require('./');

<FormGroup name="test">
  <FormLabel style={{ marginBottom: '12px' }}>Label name</FormLabel>
  <Checkbox>
    <Label>Detailed explanations</Label>
  </Checkbox>
  <Checkbox>
    <Label>Tips and tricks</Label>
  </Checkbox>
  <Checkbox>
    <Label>Hints</Label>
  </Checkbox>
</FormGroup>;

Checkbox > Active/Focused

const React = require('react');
const { default: FormGroup } = require('./group');
const { default: Label } = require('./label');
const { FormLabel, Checkbox } = require('./');

<FormGroup name="test">
  <FormLabel style={{ marginBottom: '12px' }}>Label name</FormLabel>
  <Checkbox checked>
    <Label>Detailed explanations</Label>
  </Checkbox>
  <Checkbox checked>
    <Label>Tips and tricks</Label>
  </Checkbox>
  <Checkbox>
    <Label>Hints</Label>
  </Checkbox>
</FormGroup>;

Checkbox > Disabled

const React = require('react');
const { default: FormGroup } = require('./group');
const { default: Label } = require('./label');
const { FormLabel, Checkbox } = require('./');

<FormGroup name="test">
  <FormLabel style={{ marginBottom: '12px' }}>Label name</FormLabel>
  <Checkbox disabled>
    <Label>Detailed explanations</Label>
  </Checkbox>
  <Checkbox disabled>
    <Label>Tips and tricks</Label>
  </Checkbox>
  <Checkbox disabled>
    <Label>Hints</Label>
  </Checkbox>
</FormGroup>;

Checkbox > Error

const React = require('react');
const { default: FormMeta } = require('./meta');
const { default: FormGroup } = require('./group');
const { default: Label } = require('./label');
const { FormLabel, Checkbox } = require('./');

<FormGroup name="test">
  <FormLabel style={{ marginBottom: '12px' }}>Label name</FormLabel>
  <Checkbox error checked>
    <Label>Detailed explanations</Label>
  </Checkbox>
  <Checkbox checked>
    <Label>Tips and tricks</Label>
  </Checkbox>
  <Checkbox>
    <Label>Hints</Label>
  </Checkbox>
  <FormMeta error>Something’s missing</FormMeta>
</FormGroup>;