CenturyLink
Lumen
Lumen Enterprise Portal
  • Getting Started
    • Introduction
    • Installation
    • Development workflow
    • Browser support
    • What's new
  • Foundations
      • Overview
      • Using the keyboard
      • Page structure
      • Color and sensory
      • Images
      • Text
      • Links and forms
      • Tables
      • Other
      • Color
      • Design tokens
      • Grid
  • Components
    • Accordion
    • Activity
    • Alert
    • Avatar
    • Badge
    • Brand
    • Breadcrumb
    • Button
    • Button group
    • Cache Loader
    • Card
    • Carousel
    • Checkbox
    • Copy text
    • Data table
    • Date picker
    • Divider
    • Drawer
    • Dropdown
    • Expansion panel
    • File input
    • Flag icon
    • Footer
    • Header
    • Icon
    • Label
    • Link
    • Marketing icon
    • Mobile navigation
    • Modal
    • Number input
    • Pagination
    • Phone Input
    • Picker
    • Picker group
    • Popover
    • Price
    • Progress
    • Radio button
    • Range slider
    • Search input
    • Select
    • Sidenav
    • Skeleton
    • Spinner
    • Stat
    • Steps
    • Table
    • Tabs
    • Tags
    • Text input
    • Textarea
    • Time picker
    • Toggle switch
    • Toolbar
    • Tooltip
    • Transfer list
  • Utilities
    • Border
    • Color
    • Display
    • Flex
    • Image
    • Opacity
    • Overflow
    • Position
    • Shadow
    • Sizing
    • Spacing
    • Text
    • Vertical-align
    • Z-index
  • Templates
    • App Layout
    • Card
    • Error 404
    • Error 500
    • State

Checkbox

Checkboxes are used to select one or several options in a list.
  • Examples
  • Properties
  • Accessibility

Examples

Layout Variations

Web Component

Accessibility

Keyboard Navigation

KeyFunction
TabMoves focus to the next focusable element
Shift + TabMoves focus to the previous focusable element
SpaceToggles checkbox between checked and unchecked states

For comprehensive details on keyboard support for input fields, refer to our Keyboard Control Guide.

Visit WebAIM for keyboard techniques.

Guidance for developers
  • Use clear and descriptive labels for checkboxes to help users understand their purpose.
  • Ensure each checkbox has an associated label element using the for attribute to match the id attribute of the checkbox.
  • Assign unique id attributes to each checkbox to maintain accessibility and prevent conflicts.
  • The fieldset surrounds the entire grouping of checkboxes or radio buttons. The legend provides a description for the grouping.
  • Use the aria-describedby attribute to associate error messages with checkboxes for accessibility.
  • Ensure that error messages are tagged with unique id attributes and referenced correctly with aria-describedby on corresponding checkboxes.
Guidance for designers
  • Ensure focus indicators are clearly visible to aid navigation for keyboard users.
  • Keep input labels visible, even when fields are focused.
  • Use contrasting colors for text and backgrounds to enhance readability.
  • Design clear error states and feedback for accessibility.
  • Use spacing, typography, and visual cues effectively.
  • Maintain consistency in the design of checkboxes to provide a cohesive user experience.

Find live examples in the A11y style guide.

Roles and attributes

WAI-ARIA provides a grouping role that functions similarly to fieldset and legend.

RoleElementUsage
groupdivIdentifies the div element as a group container for the checkboxes.

Resources

  • W3 Checkbox Example: Information about the accordion accessible behavior.
  • A11y Style Guide: Gives core recommendations for the accessible checkboxes.
  • W3C Forms Tutorial: Provides guidance on creating accessible forms.
  • DigitalA11y Project: Find examples of accessible checkboxes.

Other recommendations

Explore additional accessibility tips in the general Accessibility Guide.

WCAG 2.2 Guidelines

  • Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. (Level A)
  • Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
  • Headings and Labels: Headings and labels describe topic or purpose. (Level AA)
  • Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A)
  • Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)