Skip to main content

Checkbox

Examples

Checkbox

View standalone
Code
<Checkbox
  id="choice-1"
  name="options"
  value="dolor"
>
  Lorem Ipsum
</Checkbox>

Checkbox, disabled

View standalone
Code
<Checkbox
  disabled
  id="choice-1-disabled"
  name="options"
  value="dolor"
>
  Lorem Ipsum
</Checkbox>

Checked

View standalone
Code
<Checkbox
  defaultChecked
  id="choice-2"
  name="options-2"
  value="dolor"
>
  Lorem Ipsum
</Checkbox>

Checked, disabled

View standalone
Code
<Checkbox
  defaultChecked
  disabled
  id="choice-2-disabled"
  name="options-2-disabled"
  value="dolor"
>
  Lorem Ipsum
</Checkbox>

onChange Handler

View standalone
Code
<Checkbox
  id="choice-3"
  name="options-3"
  onChange={function noRefCheck() {}}
  value="dolor"
>
  Lorem Ipsum
</Checkbox>

Checkbox Group

View standalone
Checkboxes
Code
<FormGroup title="Checkboxes">
  <Checkbox
    id="choice-4-1"
    name="list-2"
    value="dolor"
  >
    Lorem Ipsum
  </Checkbox>
  <Checkbox
    id="choice-4-2"
    name="list-2"
    value="massa"
  >
    Solor
  </Checkbox>
  <Checkbox
    id="choice-4-3"
    name="list-2"
    value="gravida"
  >
    Dit Amet
  </Checkbox>
</FormGroup>

Checkbox right-aligned

View standalone
Code
<Checkbox
  id="choice-5"
  name="options-4"
  rightAlign
>
  Lorem Ipsum
</Checkbox>

Props

className

string

The className property sets the value of the class attribute of the element.

size

TextSize

Renders content at the size of the passed value.

rightAlign

boolean