Skip to main content

Checkbox

The checkbox component allows users to select one or more items from a list of options. It can also be used for a single choice that can be turned on or off such as agreeing to terms of service.

Checkboxes are used when users can select any number of choices from a list including none all or a few. If users can only select one option from a list use radio buttons instead. Each checkbox operates independently from others in a list allowing for multiple selections.

IKN Checkbox


Select any initiative

IKN Branding:

Although we are following USWDS guidelines, for the background color of the selected checkbox component, we are using the IKN brand blue color: #0D76AD.

Anatomy and Visual Specifications

A checkbox is a simple component, but its parts must be styled and implemented correctly to ensure a seamless user experience.

  1. Label: The text that describes the option. It is positioned next to the checkbox input and is essential for context and accessibility.
  2. Checkbox Input: The square box that users interact with to select or deselect an option. It provides a visual indication of its current state (checked or unchecked).
  3. Hint Text (Optional): Supplemental text that can be placed below the label to provide additional guidance or clarification for the option.

To maintain a consistent interface all checkboxes must adhere to the following visual states.

  • Default State: In its default state the checkbox is unchecked. It appears as an empty square with a 1px solid gray border and a white background.
  • Checked State: When selected a checkmark icon appears inside the box. The icon is a dark, high-contrast color to be clearly visible.
  • Hover State: When a user hovers their mouse over the checkbox and its label the checkbox's border color darkens to indicate it is interactive.
  • Focus State: When a user navigates to a checkbox using a keyboard a 2px solid blue outline (#0D76AD) must appear around both the checkbox input and its label. This visible outline is critical for keyboard users and is a key accessibility requirement.
  • Disabled State: A disabled checkbox is not interactive. It is styled with a light gray background and border and its label has reduced opacity. This state can be either checked or unchecked but the user cannot change it.
  • Error State: When a group of checkboxes is required and the user fails to make a selection an error is triggered. An error message should appear above the group describing the issue.

Accessibility and Implementation Guidance

Ensuring checkboxes are accessible is crucial for all users. The following guidelines are mandatory for any implementation on InsureKidsNow.gov.

  • Connect Labels Programmatically. Every < input type="checkbox" > must have a corresponding < label >. The for attribute of the label must exactly match the id of the input. This creates a programmatic link that allows screen readers to announce the label when the checkbox receives focus.
  • Increase the Clickable Area. The label itself should be part of the clickable area. Linking the label and input with for and id accomplishes this making the target easier to click especially for users with motor impairments or on mobile devices.
  • Group Related Checkboxes. When presenting a list of related options they must be grouped within a < fieldset > element. The < legend > element must be used to provide a clear descriptive question or prompt for the entire group of checkboxes. This gives screen reader users the necessary context before they encounter the options.
  • Support Keyboard Navigation. All checkboxes must be fully operable with a keyboard.
  • Tab: Moves focus to the next checkbox in the sequence.
  • Spacebar: Toggles the selection of the currently focused checkbox (checked or unchecked).
  • Clearly Indicate Required Choices. If at least one selection from a group is required, indicate this requirement in the text of the < legend > for the checkbox group. For example: "Select all that apply (required)."

Additional Specifications

For any additional information about specifications, guidelines, accessibility and usage, please refer to the Checkbox component on the USWDS website:

USWDS - Checkbox