Checkbox

Harmonium provides checkboxes and checkbox groups for use in forms. Use a checkbox when the user needs to make one or more 'yes or no' selections. Checkboxes should generally not be used as a substitute for buttons-- they should not usually have immediate automatic actions associated. For example, if you want a control to submit a form upon click, you want a button.

<Row>
  <Col>
    <h3>Inline Checkboxes</h3>
  </Col>
  <Col>
    <Checkbox name="singular" defaultValue="1" label="One" />
    <Checkbox name="singular" defaultValue="2" label="Two" />
    <Checkbox name="singular" defaultValue="3" label="Three" />
  </Col>
  <Col>
    <h3>Stacked Checkboxes</h3>
  </Col>
  <Col>
    <Checkbox stacked name="singular" defaultValue="1" label="Stacked Checkbox One" />
    <Checkbox stacked name="singular" defaultValue="2" label="Stacked Checkbox Two" />
    <Checkbox stacked name="singular" defaultValue="3" label="Stacked Checkbox Three" />
  </Col>
</Row>

<Row>
  <Col>
    <h3>Inline Checkboxes</h3>
  </Col>
  <Col>
    <Checkbox name="singular" defaultValue="1" label="One" />
    <Checkbox name="singular" defaultValue="2" label="Two" />
    <Checkbox name="singular" defaultValue="3" label="Three" />
  </Col>
  <Col>
    <h3>Stacked Checkboxes</h3>
  </Col>
  <Col>
    <Checkbox stacked name="singular" defaultValue="1" label="Stacked Checkbox One" />
    <Checkbox stacked name="singular" defaultValue="2" label="Stacked Checkbox Two" />
    <Checkbox stacked name="singular" defaultValue="3" label="Stacked Checkbox Three" />
  </Col>
</Row>

<Checkbox.Fieldset
  name="with_help"
  options={[
    {label: 'North', value: 'N'},
    {label: 'South', value: 'S'},
    {label: 'East disabled', value: 'E', disabled: true},
    {label: 'West', value: 'W'},
  ]}
  label="Has help text and error"
  help="This is the help text."
  error="This is the error."
/>

<Checkbox.Fieldset
  name="with_help"
  options={[
    {label: 'North', value: 'N'},
    {label: 'South', value: 'S'},
    {label: 'East disabled', value: 'E', disabled: true},
    {label: 'West', value: 'W'},
  ]}
  label="Has help text and error"
  help="This is the help text."
  error="This is the error."
/>