Form.Checkbox

A simple checkbox for use with Form.CheckboxSet.

Note: extra props added to this component are passed as attributes to the underlying input node. See MDN for documentation on available input attributes.

Controlled Standalone Usage

Show editable code example

Any Paragon component or export may be added to the code example.

() => {
  const [isChecked, setChecked] = useState(false);
  const handleChange = e => setChecked(e.target.checked);
  return (
    <Form.Checkbox checked={isChecked} onChange={handleChange}>
      I want pizza.
    </Form.Checkbox>
  );
}

() => {
  const [isChecked, setChecked] = useState(false);
  const handleChange = e => setChecked(e.target.checked);
  return (
    <Form.Checkbox checked={isChecked} onChange={handleChange}>
      I want pizza.
    </Form.Checkbox>
  );
}

Unlabeled control

Show editable code example

Any Paragon component or export may be added to the code example.

() => {
  const [isChecked, setChecked] = useState(false);
  const handleChange = e => setChecked(e.target.checked);
  return (
    <CheckboxControl
      checked={isChecked}
      onChange={handleChange}
      aria-label="Checkbox"
    />
  );
}

() => {
  const [isChecked, setChecked] = useState(false);
  const handleChange = e => setChecked(e.target.checked);
  return (
    <CheckboxControl
      checked={isChecked}
      onChange={handleChange}
      aria-label="Checkbox"
    />
  );
}

Controlled Group Usage with useCheckboxSetValues

useCheckboxSetValues(initialValues[]) returns an array: [state, dispatchers].

dispatchers includes add(value) remove(value) set(values[]) and clear()

Show editable code example

Any Paragon component or export may be added to the code example.

() => {

  const [colorValues, { add, remove }] = useCheckboxSetValues(['green']);

  const handleChange = e => {
    if (e.target.checked) {
      add(e.target.value);
    } else {
      remove(e.target.value);
    }
  }
  return (
    <Form.Group>
      <Form.Label>Which Color?</Form.Label>
      <Form.CheckboxSet
        name="colors"
        onChange={handleChange}
        value={colorValues}
      >
        <Form.Checkbox value="red">Red</Form.Checkbox>
        <Form.Checkbox value="green">Green</Form.Checkbox>
        <Form.Checkbox value="blue">Blue</Form.Checkbox>
        <Form.Checkbox value="cyan" disabled>Cyan</Form.Checkbox>
      </Form.CheckboxSet>
    </Form.Group>
  );
}

() => {

  const [colorValues, { add, remove }] = useCheckboxSetValues(['green']);

  const handleChange = e => {
    if (e.target.checked) {
      add(e.target.value);
    } else {
      remove(e.target.value);
    }
  }
  return (
    <Form.Group>
      <Form.Label>Which Color?</Form.Label>
      <Form.CheckboxSet
        name="colors"
        onChange={handleChange}
        value={colorValues}
      >
        <Form.Checkbox value="red">Red</Form.Checkbox>
        <Form.Checkbox value="green">Green</Form.Checkbox>
        <Form.Checkbox value="blue">Blue</Form.Checkbox>
        <Form.Checkbox value="cyan" disabled>Cyan</Form.Checkbox>
      </Form.CheckboxSet>
    </Form.Group>
  );
}

Uncontrolled Usage

Show editable code example

Any Paragon component or export may be added to the code example.

<Form.Group>
  <Form.Label>Which Color?</Form.Label>
  <Form.CheckboxSet
    name="color-two"
    onChange={(e) => console.log(e.target.value)}
    defaultValue={['green']}
  >
    <Form.Checkbox value="red">Red</Form.Checkbox>
    <Form.Checkbox value="green">Green</Form.Checkbox>
    <Form.Checkbox value="blue">Blue</Form.Checkbox>
    <Form.Checkbox value="cyan" disabled>Cyan</Form.Checkbox>
  </Form.CheckboxSet>
</Form.Group>

<Form.Group>
  <Form.Label>Which Color?</Form.Label>
  <Form.CheckboxSet
    name="color-two"
    onChange={(e) => console.log(e.target.value)}
    defaultValue={['green']}
  >
    <Form.Checkbox value="red">Red</Form.Checkbox>
    <Form.Checkbox value="green">Green</Form.Checkbox>
    <Form.Checkbox value="blue">Blue</Form.Checkbox>
    <Form.Checkbox value="cyan" disabled>Cyan</Form.Checkbox>
  </Form.CheckboxSet>
</Form.Group>

Indeterminate Usage

Show editable code example

Any Paragon component or export may be added to the code example.

() => {
  const allCheeseOptions = ['swiss', 'cheddar', 'pepperjack'];
  const [checkedCheeses, { add, remove, set, clear }] = useCheckboxSetValues(['swiss']);

  const handleChange = e => {
    e.target.checked ? add(e.target.value) : remove(e.target.value);
  };

  const handleCheckAllChange = e => {
    e.target.checked ? set(allCheeseOptions) : clear();
  };

  const allChecked = allCheeseOptions.every(value => checkedCheeses.includes(value));
  const someChecked = allCheeseOptions.some(value => checkedCheeses.includes(value));
  const isIndeterminate = someChecked && !allChecked;

  return (
    <>
      <div className="d-flex">
        <Form.Checkbox
          checked={allChecked}
          isIndeterminate={isIndeterminate}
          onChange={handleCheckAllChange}
        >
          All the cheese
        </Form.Checkbox>
      </div>
      <Form.CheckboxSet
        name="color-six"
        className="p-2"
        value={checkedCheeses}
        onChange={handleChange}
      >
        <Form.Checkbox value="swiss">Swiss</Form.Checkbox>
        <Form.Checkbox value="cheddar">Cheddar</Form.Checkbox>
        <Form.Checkbox value="pepperjack">Pepperjack</Form.Checkbox>
      </Form.CheckboxSet>
    </>
  );
}

() => {
  const allCheeseOptions = ['swiss', 'cheddar', 'pepperjack'];
  const [checkedCheeses, { add, remove, set, clear }] = useCheckboxSetValues(['swiss']);

  const handleChange = e => {
    e.target.checked ? add(e.target.value) : remove(e.target.value);
  };

  const handleCheckAllChange = e => {
    e.target.checked ? set(allCheeseOptions) : clear();
  };

  const allChecked = allCheeseOptions.every(value => checkedCheeses.includes(value));
  const someChecked = allCheeseOptions.some(value => checkedCheeses.includes(value));
  const isIndeterminate = someChecked && !allChecked;

  return (
    <>
      <div className="d-flex">
        <Form.Checkbox
          checked={allChecked}
          isIndeterminate={isIndeterminate}
          onChange={handleCheckAllChange}
        >
          All the cheese
        </Form.Checkbox>
      </div>
      <Form.CheckboxSet
        name="color-six"
        className="p-2"
        value={checkedCheeses}
        onChange={handleChange}
      >
        <Form.Checkbox value="swiss">Swiss</Form.Checkbox>
        <Form.Checkbox value="cheddar">Cheddar</Form.Checkbox>
        <Form.Checkbox value="pepperjack">Pepperjack</Form.Checkbox>
      </Form.CheckboxSet>
    </>
  );
}

Inline layout

Show editable code example

Any Paragon component or export may be added to the code example.

<Form.Group>
  <Form.Label>Which Color?</Form.Label>
  <Form.CheckboxSet
    name="color-three"
    onChange={(e) => console.log(e.target.value)}
    defaultValue={['green']}
    isInline
  >
    <Form.Checkbox value="red">Red</Form.Checkbox>
    <Form.Checkbox value="green">Green</Form.Checkbox>
    <Form.Checkbox value="blue">Blue</Form.Checkbox>
    <Form.Checkbox value="cyan" disabled>Cyan</Form.Checkbox>
  </Form.CheckboxSet>
</Form.Group>

<Form.Group>
  <Form.Label>Which Color?</Form.Label>
  <Form.CheckboxSet
    name="color-three"
    onChange={(e) => console.log(e.target.value)}
    defaultValue={['green']}
    isInline
  >
    <Form.Checkbox value="red">Red</Form.Checkbox>
    <Form.Checkbox value="green">Green</Form.Checkbox>
    <Form.Checkbox value="blue">Blue</Form.Checkbox>
    <Form.Checkbox value="cyan" disabled>Cyan</Form.Checkbox>
  </Form.CheckboxSet>
</Form.Group>

Validation

Group Level Validation

Show editable code example

Any Paragon component or export may be added to the code example.

<Form.Group isInvalid>
  <Form.Label>Which Color?</Form.Label>
  <Form.CheckboxSet
    name="color-five"
    onChange={(e) => console.log(e.target.value)}
  >
    <Form.Checkbox value="red">Red</Form.Checkbox>
    <Form.Checkbox value="green">Green</Form.Checkbox>
    <Form.Checkbox value="blue">Blue</Form.Checkbox>
    <Form.Checkbox value="cyan" disabled>Cyan</Form.Checkbox>
  </Form.CheckboxSet>
  <Form.Control.Feedback>
    Please choose an option.
  </Form.Control.Feedback>
</Form.Group>

<Form.Group isInvalid>
  <Form.Label>Which Color?</Form.Label>
  <Form.CheckboxSet
    name="color-five"
    onChange={(e) => console.log(e.target.value)}
  >
    <Form.Checkbox value="red">Red</Form.Checkbox>
    <Form.Checkbox value="green">Green</Form.Checkbox>
    <Form.Checkbox value="blue">Blue</Form.Checkbox>
    <Form.Checkbox value="cyan" disabled>Cyan</Form.Checkbox>
  </Form.CheckboxSet>
  <Form.Control.Feedback>
    Please choose an option.
  </Form.Control.Feedback>
</Form.Group>

Individual option validation

Show editable code example

Any Paragon component or export may be added to the code example.

<Form.Group>
  <Form.Label>Which Color?</Form.Label>
  <Form.CheckboxSet name="color-four">
    <Form.Checkbox
      value="red"
      description="Red's cool"
    >
      Red
    </Form.Checkbox>
    <Form.Checkbox
      value="green"
      description="Excellent choice"
      isValid
    >
      Green
    </Form.Checkbox>
    <Form.Checkbox
      value="blue"
      description="Poor choice"
      isInvalid
    >
      Blue
    </Form.Checkbox>
    <Form.Checkbox
      value="cyan"
      disabled
    >
      Cyan
    </Form.Checkbox>
  </Form.CheckboxSet>
</Form.Group>

<Form.Group>
  <Form.Label>Which Color?</Form.Label>
  <Form.CheckboxSet name="color-four">
    <Form.Checkbox
      value="red"
      description="Red's cool"
    >
      Red
    </Form.Checkbox>
    <Form.Checkbox
      value="green"
      description="Excellent choice"
      isValid
    >
      Green
    </Form.Checkbox>
    <Form.Checkbox
      value="blue"
      description="Poor choice"
      isInvalid
    >
      Blue
    </Form.Checkbox>
    <Form.Checkbox
      value="cyan"
      disabled
    >
      Cyan
    </Form.Checkbox>
  </Form.CheckboxSet>
</Form.Group>

Label Position

The label is positioned to the right of the checkbox control by default. The label can be rendered on the left instead by passing the floatLabelLeft prop.

Show editable code example

Any Paragon component or export may be added to the code example.

<Form.Group>
  <Form.CheckboxSet name="color-single">
    <Form.Checkbox value="red" floatLabelLeft>Red</Form.Checkbox>
  </Form.CheckboxSet>
</Form.Group>

<Form.Group>
  <Form.CheckboxSet name="color-single">
    <Form.Checkbox value="red" floatLabelLeft>Red</Form.Checkbox>
  </Form.CheckboxSet>
</Form.Group>

Theme Variables (SCSS)#

$input-padding-y:                        $input-btn-padding-y !default;
$input-padding-x:                        $input-btn-padding-x !default;
$input-font-family:                      $input-btn-font-family !default;
$input-font-size:                        $input-btn-font-size !default;
$input-font-weight:                      $font-weight-base !default;
$input-line-height:                      $input-btn-line-height !default;
$input-padding-y-sm:                     $input-btn-padding-y-sm !default;
$input-padding-x-sm:                     $input-btn-padding-x-sm !default;
$input-font-size-sm:                     $input-btn-font-size-sm !default;
$input-line-height-sm:                   $input-btn-line-height-sm !default;
$input-padding-y-lg:                     $input-btn-padding-y-lg !default;
$input-padding-x-lg:                     $input-btn-padding-x-lg !default;
$input-font-size-lg:                     $input-btn-font-size-lg !default;
$input-line-height-lg:                   $input-btn-line-height-lg !default;
$input-bg:                               $white !default;
$input-disabled-bg:                      theme-color("gray", "background") !default;
$input-color:                            theme-color("gray", "text") !default;
$input-border-color:                     $gray-500 !default;
$input-border-width:                     $input-btn-border-width !default;
$input-box-shadow:                       inset 0 1px 1px rgba($black, .075) !default;
$input-border-radius:                    $border-radius !default;
$input-border-radius-lg:                 $border-radius-lg !default;
$input-border-radius-sm:                 $border-radius-sm !default;
$input-focus-bg:                         $input-bg !default;
$input-focus-border-color:               $component-active-bg !default;
$input-focus-color:                      $input-color !default;
$input-focus-width:                      1px !default;
$input-focus-box-shadow:                 $input-btn-focus-box-shadow !default;
$input-placeholder-color:                theme-color("gray", "light-text") !default;
$input-plaintext-color:                  $body-color !default;
$input-height-border:                    $input-border-width * 2 !default;
$input-height-inner:                     calc(#{$input-line-height * 1em} + #{$input-padding-y * 2}) !default;
$input-height-inner-half:                calc(#{$input-line-height * .5em} + #{$input-padding-y}) !default;
$input-height-inner-quarter:             calc(#{$input-line-height * .25em} + #{calc($input-padding-y / 2)}) !default;
$input-height:                           calc(
  #{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-height-border}
) !default;
$input-height-sm:                        calc(
  #{$input-line-height-sm * 1em} + #{$input-btn-padding-y-sm * 2} + #{$input-height-border}
) !default;
$input-height-lg:                        calc(
  #{$input-line-height-lg * 1em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border}
) !default;
$input-hover-width:                      1px !default;
$input-transition:                       border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
$form-text-margin-top:                   .25rem !default;
$form-check-input-gutter:                1.25rem !default;
$form-check-input-margin-y:              .3rem !default;
$form-check-input-margin-x:              .25rem !default;
$form-check-inline-margin-x:             .75rem !default;
$form-check-inline-input-margin-x:       .3125rem !default;
$form-check-position-axis:               .375rem !default;
$form-check-focus-border-radius:         .0625rem !default;
$form-check-border-width:                .125rem !default;
$form-grid-gutter-width:                 10px !default;
$form-group-margin-bottom:               1rem !default;
$input-group-addon-color:                $input-color !default;
$input-group-addon-bg:                   theme-color("gray", "background") !default;
$input-group-addon-border-color:         $input-border-color !default;
$custom-forms-transition:                background-color .15s ease-in-out,
  border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
$custom-control-gutter:                  .5rem !default;
$custom-control-spacer-x:                1rem !default;
$custom-control-cursor:                  null !default;
$custom-control-indicator-size:          1.25rem !default;
$custom-control-indicator-bg:            $input-bg !default;
$custom-control-indicator-bg-size:       100% !default;
$custom-control-indicator-box-shadow:    $input-box-shadow !default;
$custom-control-indicator-border-color:  $gray-700 !default;
$custom-control-indicator-border-width:  2px !default;
$custom-control-label-color:             null !default;
$custom-control-indicator-disabled-bg:           $input-disabled-bg !default;
$custom-control-label-disabled-color:            theme-color("gray", "light-text") !default;
$custom-control-indicator-checked-color:         $component-active-bg !default;
$custom-control-indicator-checked-valid-color:     theme-color("success") !default;
$custom-control-indicator-checked-invalid-color:   theme-color("danger") !default;
$custom-control-indicator-checked-bg:            $component-active-bg !default;
$custom-control-indicator-checked-disabled-bg:   rgba($primary, .5) !default;
$custom-control-indicator-checked-box-shadow:    none !default;
$custom-control-indicator-checked-border-color:  $custom-control-indicator-checked-bg !default;
$custom-control-indicator-focus-box-shadow:      0 0 0 4px rgba(0, 0, 0, .1) !default;
$custom-control-indicator-focus-border-color:    $input-focus-border-color !default;
$custom-control-indicator-active-color:          $component-active-color !default;
$custom-control-indicator-active-bg:             $component-active-bg !default;
$custom-control-indicator-active-box-shadow:     none !default;
$custom-control-indicator-active-border-color:   $custom-control-indicator-active-bg !default;
$custom-checkbox-indicator-border-radius:        0 !default;
$custom-checkbox-indicator-icon-checked:         str-replace(url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='#{$custom-control-indicator-checked-color}'/></svg>"), "#", "%23") !default;
$custom-checkbox-indicator-icon-valid-checked:          str-replace(url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='#{$custom-control-indicator-checked-valid-color}'/></svg>"), "#", "%23") !default;
$custom-checkbox-indicator-icon-invalid-checked:        str-replace(url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='#{$custom-control-indicator-checked-invalid-color}'/></svg>"), "#", "%23") !default;
$custom-checkbox-indicator-indeterminate-bg:            $component-active-bg !default;
$custom-checkbox-indicator-indeterminate-color:         $custom-control-indicator-checked-color !default;
$custom-checkbox-indicator-icon-indeterminate:          str-replace(url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM17 13H7V11H17V13Z' fill='#{$custom-checkbox-indicator-indeterminate-color}'/></svg>"), "#", "%23") !default;
$custom-checkbox-indicator-indeterminate-box-shadow:    none !default;
$custom-checkbox-indicator-indeterminate-border-color:  $custom-checkbox-indicator-indeterminate-bg !default;
$custom-radio-indicator-border-radius:           50% !default;
$custom-radio-indicator-icon-checked:            str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-bg}'/%3e%3c/svg%3e"), "#", "%23") !default;
$custom-radio-indicator-icon-valid-checked:      str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-valid-color}'/%3e%3c/svg%3e"), "#", "%23") !default;
$custom-radio-indicator-icon-invalid-checked:    str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-invalid-color}'/%3e%3c/svg%3e"), "#", "%23") !default;
$custom-switch-indicator-icon-off:               str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-bg}'/%3e%3c/svg%3e"), "#", "%23") !default;
$custom-switch-indicator-icon-on:                str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-active-color}'/%3e%3c/svg%3e"), "#", "%23") !default;
$custom-switch-width:                            $custom-control-indicator-size * 1.75 !default;
$custom-switch-indicator-border-radius:          calc($custom-control-indicator-size / 2) !default;
$custom-switch-indicator-size:                   calc(
  #{$custom-control-indicator-size} - #{$custom-control-indicator-border-width * 4}
) !default;
$custom-switch-indicator-checked-bg:             theme-color("success") !default;
$custom-select-padding-y:            $input-padding-y !default;
$custom-select-padding-x:            $input-padding-x !default;
$custom-select-font-family:          $input-font-family !default;
$custom-select-font-size:            $input-font-size !default;
$custom-select-height:               $input-height !default;
$custom-select-indicator-padding:    1rem !default;
$custom-select-font-weight:          $input-font-weight !default;
$custom-select-line-height:          $input-line-height !default;
$custom-select-color:                $input-color !default;
$custom-select-disabled-color:       theme-color("gray", "light-text") !default;
$custom-select-bg:                   $input-bg !default;
$custom-select-disabled-bg:          theme-color("gray", "background") !default;
$custom-select-bg-size:              24px 24px !default; // In pixels because image dimensions
$custom-select-indicator-color:      theme-color("gray", "hover") !default;
$custom-select-indicator:            str-replace(url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.58984L12 13.1698L7.41 8.58984L6 9.99984L12 15.9998L18 9.99984L16.59 8.58984Z" fill="#{$custom-select-indicator-color}"/></svg>'), "#", "%23") !default;
$custom-select-background:           $custom-select-indicator no-repeat right
  $input-padding-y center / $custom-select-bg-size !default;
$custom-select-feedback-icon-padding-right:  calc(
  (1em + #{2 * $custom-select-padding-y}) * 3 / 4 + #{$custom-select-padding-x + $custom-select-indicator-padding}
) !default;
$custom-select-feedback-icon-position:       center right
  ($custom-select-padding-x + $custom-select-indicator-padding) !default;
$custom-select-feedback-icon-size:           $input-height-inner-half $input-height-inner-half !default;
$custom-select-border-width:         $input-border-width !default;
$custom-select-border-color:         $input-border-color !default;
$custom-select-border-radius:        $border-radius !default;
$custom-select-box-shadow:           inset 0 1px 2px rgba($black, .075) !default;
$custom-select-focus-border-color:   $input-focus-border-color !default;
$custom-select-focus-width:          $input-focus-width !default;
$custom-select-focus-box-shadow:     $input-btn-focus-box-shadow !default;
$custom-select-padding-y-sm:         $input-padding-y-sm !default;
$custom-select-padding-x-sm:         $input-padding-x-sm !default;
$custom-select-font-size-sm:         $input-font-size-sm !default;
$custom-select-height-sm:            $input-height-sm !default;
$custom-select-padding-y-lg:         $input-padding-y-lg !default;
$custom-select-padding-x-lg:         $input-padding-x-lg !default;
$custom-select-font-size-lg:         $input-font-size-lg !default;
$custom-select-height-lg:            $input-height-lg !default;
$custom-range-track-width:           100% !default;
$custom-range-track-height:          .5rem !default;
$custom-range-track-cursor:          pointer !default;
$custom-range-track-bg:              theme-color("gray", "graphic") !default;
$custom-range-track-border-radius:   1rem !default;
$custom-range-track-box-shadow:      inset 0 .25rem .25rem rgba($black, .1) !default;
$custom-range-thumb-width:                    1rem !default;
$custom-range-thumb-height:                   $custom-range-thumb-width !default;
$custom-range-thumb-bg:                       $component-active-bg !default;
$custom-range-thumb-border:                   0 !default;
$custom-range-thumb-border-radius:            1rem !default;
$custom-range-thumb-box-shadow:               0 .1rem .25rem rgba($black, .1) !default;
$custom-range-thumb-focus-box-shadow:         0 0 0 1px $body-bg, $input-focus-box-shadow !default;
$custom-range-thumb-focus-box-shadow-width:   $input-focus-width !default; // For focus box shadow issue in IE/Edge
$custom-range-thumb-active-bg:                lighten($component-active-bg, 35%) !default;
$custom-range-thumb-disabled-bg:              theme-color("gray", "default") !default;
$custom-file-height:                 $input-height !default;
$custom-file-height-inner:           $input-height-inner !default;
$custom-file-focus-border-color:     $input-focus-border-color !default;
$custom-file-focus-box-shadow:       $input-focus-box-shadow !default;
$custom-file-disabled-bg:            $input-disabled-bg !default;
$custom-file-padding-y:              $input-padding-y !default;
$custom-file-padding-x:              $input-padding-x !default;
$custom-file-line-height:            $input-line-height !default;
$custom-file-font-family:            $input-font-family !default;
$custom-file-font-weight:            $input-font-weight !default;
$custom-file-color:                  $input-color !default;
$custom-file-bg:                     $input-bg !default;
$custom-file-border-width:           $input-border-width !default;
$custom-file-border-color:           $input-border-color !default;
$custom-file-border-radius:          $input-border-radius !default;
$custom-file-box-shadow:             $input-box-shadow !default;
$custom-file-button-color:           $custom-file-color !default;
$custom-file-button-bg:              $input-group-addon-bg !default;
$custom-file-text:  (
  en: "Browse"
) !default;
$form-feedback-margin-top:           $form-text-margin-top !default;
$form-feedback-font-size:            $small-font-size !default;
$form-feedback-valid-color:          theme-color("success") !default;
$form-feedback-invalid-color:        theme-color("danger") !default;
$form-feedback-icon-valid-color:     $form-feedback-valid-color !default;
$form-feedback-icon-valid:           str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"), "#", "%23") !default;
$form-feedback-icon-invalid-color:   $form-feedback-invalid-color !default;
$form-feedback-icon-invalid:         str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-feedback-icon-invalid-color}' viewBox='-2 -2 7 7'%3e%3cpath stroke='#{$form-feedback-icon-invalid-color}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"), "#", "%23") !default;
$form-validation-states:  () !default;
$form-validation-states:  map-merge(
  (
    "valid": (
      "color": $form-feedback-valid-color,
      "icon": $form-feedback-icon-valid
    ),
    "invalid": (
      "color": $form-feedback-invalid-color,
      "icon": $form-feedback-icon-invalid
    ),
  ),
  $form-validation-states
);
$form-feedback-tooltip-padding-y:      .25rem !default;
$form-feedback-tooltip-padding-x:      .5rem !default;
$form-feedback-tooltip-font-size:      $font-size-sm !default;
$form-feedback-tooltip-line-height:    $line-height-base !default;
$form-feedback-tooltip-opacity:        .9 !default;
$form-feedback-tooltip-border-radius:  $border-radius !default;
$form-autosuggest-icon-width:  2.4rem;
$form-autosuggest-icon-height:  $form-autosuggest-icon-width;
$form-autosuggest-spinner-width:  1.25rem;
$form-autosuggest-spinner-height:  $form-autosuggest-spinner-width;
$form-autosuggest-border-width:  .125rem;

Props API#

FormCheckbox Props API

id string
Specifies id of the FormCheckbox component.
children node Required
Specifies contents of the component.
className string
Specifies class name to append to the base element.
controlClassName string
Specifies class name for control component.
labelClassName string
Specifies class name for label component.
description node
Specifies description to show under the checkbox.
isInvalid bool
Specifies whether to display checkbox in invalid state, this affects styling.
Defaultfalse
isValid bool
Specifies whether to display checkbox in valid state, this affects styling.
Defaultfalse
controlAs elementType
Specifies control element.
DefaultReact.forwardRef( ({ isIndeterminate, ...props }, ref) => { const { getCheckboxControlProps, hasCheckboxSetProvider } = useCheckboxSetContext(); const defaultRef = React.useRef(); const resolvedRef = ref || defaultRef; const { getControlProps } = useFormGroupContext(); let checkboxProps = getControlProps({ ...props, className: classNames('pgn__form-checkbox-input', props.className), }); if (hasCheckboxSetProvider) { checkboxProps = getCheckboxControlProps(checkboxProps); } React.useEffect(() => { // this if(resolvedRef.current) prevents console errors in testing if (resolvedRef.current) { resolvedRef.current.indeterminate = isIndeterminate; } }, [resolvedRef, isIndeterminate]); return ( <input type="checkbox" {...checkboxProps} ref={resolvedRef} /> ); }, )
floatLabelLeft bool
Specifies whether the floating label should be aligned to the left.
Defaultfalse
disabled bool
Specifies whether the FormCheckbox is disabled.
Defaultfalse

CheckboxControl Props API

isIndeterminate bool
Specifies whether the checkbox should be rendered in indeterminate state.
Defaultfalse
className string
Specifies class name to append to the base element.

FormCheckboxSet Props API

children node Required
Specifies contents of the component.
className string
Specifies class name to append to the base element.
name string Required
Specifies name for the component.
value string[]
Specifies values for the checkboxes.
defaultValue string[]
Specifies default values for the checkboxes.
isInline bool
Specifies whether to display components with inline styling.
Defaultfalse
onChange func
Specifies onChange event handler.
onFocus func
Specifies onFocus event handler.
onBlur func
Specifies onBlur event handler.

Usage Insights#

CheckboxControl

Project Name	Paragon Version	Instance Count
frontend-app-admin-portal	20.46.3	2
frontend-app-course-authoring	20.46.2	3
frontend-app-learner-portal-enterprise	20.45.4	2
frontend-lib-content-components	21.5.6	4

FormCheckbox

Project Name	Paragon Version	Instance Count
frontend-app-account	20.46.3	2
frontend-app-admin-portal	20.46.3	9
frontend-app-authn	20.46.2	3
frontend-app-communications	20.46.2	7
frontend-app-course-authoring	20.46.2	2
frontend-app-discussions	20.44.0	2
frontend-app-gradebook	20.45.0	1
frontend-app-learner-dashboard	20.46.2	1
frontend-app-learner-portal-enterprise	20.45.4	1
frontend-app-library-authoring	21.5.6	4
frontend-app-support-tools	20.46.0	1
frontend-lib-content-components	21.5.6	7
prospectus	20.46.2	1

FormCheckboxSet

Project Name	Paragon Version	Instance Count
frontend-app-communications	20.46.2	1
frontend-app-course-authoring	20.46.2	1
frontend-app-learner-dashboard	20.46.2	1
frontend-lib-content-components	21.5.6	1

Edit this page Leave feedback

Paragon Design System

Theme

Form.Checkbox

Controlled Standalone Usage

Unlabeled control

Controlled Group Usage with useCheckboxSetValues

Uncontrolled Usage

Indeterminate Usage

Inline layout

Validation

Group Level Validation

Individual option validation

Label Position

Theme Variables (SCSS)#

Props API#

Usage Insights#

CheckboxControl

FormCheckbox

FormCheckboxSet

All components (A-Z)

Theme

Form.Checkbox

Controlled Standalone Usage#

Unlabeled control#

Controlled Group Usage with useCheckboxSetValues#

Uncontrolled Usage#

Indeterminate Usage#

Inline layout#

Validation#

Group Level Validation#

Individual option validation#

Label Position#

Theme Variables (SCSS)#

Props API#

Usage Insights#

CheckboxControl

FormCheckbox

FormCheckboxSet

All components (A-Z)

Controlled Standalone Usage

Unlabeled control

Controlled Group Usage with useCheckboxSetValues

Uncontrolled Usage

Indeterminate Usage

Inline layout

Validation

Group Level Validation

Individual option validation

Label Position