Checkbox

Checkbox is to be used when a user has the option to select multiple items or as a toggle option. Do not use a checkbox when a user is only allowed to select one item, for that use case please use the radio inputs.

Demo

Checkbox Option

    <div className="gds-form-group">
      <div className="gds-form-group__checkbox">
          <label className="gds-form-group__checkbox-label">
              <input className="gds-form-group__checkbox-input" type="checkbox" />
              <span className="gds-form-group__checkbox-indicator"></span>Checkbox Option
          </label>
      </div>
    </div>


    <div className="gds-form-group">
      <div className="gds-form-group__checkbox">
          <label className="gds-form-group__checkbox-label">
              <input className="gds-form-group__checkbox-input" type="checkbox" />
              <span className="gds-form-group__checkbox-indicator"></span>Checkbox Option
          </label>
      </div>
    </div>

Error Log

Size

gds-form-group__checkbox--xs

gds-form-group__checkbox--sm

State

gds-form-group--disabled

Context (Color)

gds-form-group__checkbox-label--dark

gds-form-group--success

gds-form-group--warning

gds-form-group--danger

Position

gds-form-group__checkbox--inline