Checkbox button

Usage context

When to use

Use checkbox buttons when the user may select one or more options from a group. You may also use a checkbox for a single choice that may be selected or unselected, such as agreeing that you have read the terms and conditions.

Checkboxes are useful for:

“Select all that apply” questions in forms
Filters
Toggling between selected and unselected states

When to use something else

Don’t use a checkbox button when the user may only select one option (use a radio button instead)

Usage guidelines

Standalone Checkbox

The standalone checkbox can be utilized with an nyc-field class container, with the following items:

Legend element (optional)
Checkbox input element
Label element: After the checkbox input

This code is for reference only. The library is currently in beta. Check back for future releases.

Default

Default standalone checkbox

Long text

Long string of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae urna ac neque posuere fringilla.

Error

Standalone checkbox

<div class="code-examples">

  <div>
    <legend>Default</legend>
    <div class="nyc-field">
      <input id="checkbox-default" type="checkbox" name="checkbox-default"/>
      <label for="checkbox-default">Default standalone checkbox</label>
    </div>
  </div>

  <div>
    <legend>Long text</legend>
    <div class="nyc-field">
      <input id="checkbox-long-text" type="checkbox" name="checkbox-long-text"/>
      <label for="checkbox-long-text">Long string of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae urna ac neque posuere fringilla.</label>
    </div>
  </div>

  <div>
    <legend>Error</legend>
    <div class="nyc-field nyc-field--error">
      <input id="checkbox-error" type="checkbox" name="checkbox-error"/>
      <label for="checkbox-error">Standalone checkbox</label>
    </div>
  </div>
    
</div>

The checkbox button can be utilized with an nyc-field class container, with the following items:

Label element: This acts as the button
Checkbox input element: Contained within the label

This code is for reference only. The library is currently in beta. Check back for future releases.

Default Label

Disabled Label

Disabled&Checked Label

<div class="code-examples">

  <div class="nyc-field">
    <legend>Default</legend>
    <label>
      <input type="checkbox" name="checkbox-default"/> Label
    </label>
  </div>

  <div class="nyc-field">
    <legend>Disabled</legend>
    <label>
      <input type="checkbox" name="checkbox-disabled" disabled/> Label
    </label>
  </div>

  <div class="nyc-field">
    <legend>Disabled&Checked</legend>
    <label>
      <input type="checkbox" name="checkbox-disabled-checked" disabled checked/> Label
    </label>
  </div>
    
</div>

Checkbox button group

The Checkbox button group can be utilized with an nyc-field class container, with the following items:

Legend element: This acts as the title for the group of checkboxes.
Multiple Checkbox button components: As described above, but without individual nyc-field containers
Error element (optional): .error-message: Provides error messaging for the group. This should be placed after the legend and subtitle, and before the checkbox button elements.
Subtitle element (optional): .subtitle: Provides additional context for the dropdown. This should be placed between the label and checkbox button elements.

This code is for reference only. The library is currently in beta. Check back for future releases.

Default Subtitle text Label 1 Label 2 Label 3

Error Subtitle text

This field is required.

Label 1 Label 2 Label 3

Supporting Text Subtitle text

Label 1 Supporting text

Label 2 Supporting text

Label 3 Longer Supporting text example

<div class="code-examples">

  <div class="nyc-field">
    <legend>Default</legend>
    <span class="subtitle">Subtitle text</span>
    <label>
      <input type="checkbox" name="default-group-1"/> Label 1
    </label>
    <label>
      <input type="checkbox" name="default-group-2"/> Label 2
    </label>
    <label>
      <input type="checkbox" name="default-group-3"/> Label 3
    </label>
  </div>

  <div class="nyc-field nyc-field--error">
    <legend>Error</legend>
    <span class="subtitle">Subtitle text</span>
    <div class="error-message"><i class="i-ph:warning-circle-bold"></i>This field is required.</div>
    <label>
      <input type="checkbox" name="error-group-1"/> Label 1
    </label>
    <label>
      <input type="checkbox" name="error-group-2"/> Label 2
    </label>
    <label>
      <input type="checkbox" name="error-group-3"/> Label 3
    </label>
  </div>

  <div class="nyc-field">
    <legend>Supporting Text</legend>
    <span class="subtitle">Subtitle text</span>
    <label>
      <input type="checkbox" name="supporting-text-group"/>
      <div>
        <span>Label 1</span>
        <span class="subtitle">Supporting text</span>
      </div>
    </label>
    <label>
      <input type="checkbox" name="supporting-text-group"/>
      <div>
        <span>Label 2</span>
        <span class="subtitle">Supporting text</span>
      </div>
    </label>
    <label>
      <input type="checkbox" name="supporting-text-group"/>
      <div>
        <span>Label 3</span>
        <span class="subtitle">Longer Supporting text example</span>
      </div>
    </label>
  </div>
    
</div>