Checkbox Input

Checkboxes allow users to select multiple options from a set of predefined options.

Overview

Usage

When to use this component?

Checkboxes are used when users need to select one or more options from a list. They are ideal for forms, settings, and any interface where multiple selections are allowed or required. Common use cases include selecting multiple interests, choosing preferences, or marking tasks as complete.

How it works

Checkboxes are typically presented in groups, with each box representing a different option that users can check or uncheck independently. Each checkbox includes a square box and a label, with optional elements like subtitles or trailing icons for additional context or emphasis.

Code

Vanilla Js

<dda-checkbox
    title_text="Checkbox Title"
    checked="false"
    size="md"
    style_type="square"
    supporting="Supporting Text"
    group_name="checkboxgroup"
    input_id="testId"
    custom_class=""
    component_mode=""
    aria_label="checkbox"
    onclick="console.log('Checkbox clicked')"
></dda-checkbox>

React

   <DdaCheckbox
            title_text="Checkbox Title"
            checked="false"
            size="md"
            style_type="square"
            supporting="Supporting Text"
            group_name="checkboxgroup"
            input_id="testId"
            custom_class=""
            component_mode=""
            on_checked="() => void 0"
            aria_label="checkbox"
        ></DdaCheckbox>

Vue

   <DdaCheckbox
            title_text="Checkbox Title"
            checked="false"
            size="md"
            style_type="square"
            supporting="Supporting Text"
            group_name="checkboxgroup"
            input_id="testId"
            custom_class=""
            component_mode=""
            on_checked="() => void 0"
            aria_label="checkbox"
        ></DdaCheckbox>

Angular

<dda-checkbox
    title_text="Checkbox Title"
    checked="false"
    size="md"
    style_type="square"
    supporting="Supporting Text"
    group_name="checkboxgroup"
    input_id="testId"
    custom_class=""
    component_mode=""
    on_checked="() => void 0"
    aria_label="checkbox"
></dda-checkbox>

Properties

Property	Description	Type
aria_label	Provides an accessible label for screen readers when a visible text label is not available.	string
checkbox_status	Applies a status-based CSS class to the checkbox, such as 'disabled' or 'error'.	string
checked	Determines whether the checkbox is checked (true) or unchecked (false) by default.	boolean
component_mode	Determines the mode or theme of the component, if applicable.	string
custom_class	Additional custom CSS classes to apply to the checkbox container.	string
group_name	The name attribute of the checkbox, useful for grouping multiple checkboxes together.	string
input_id	The unique identifier for the checkbox input, used to associate the <label> with the input.	string
size	Defines the size of the checkbox. Possible values could be 'sm', 'md', or 'lg'.	string
style_type	Specifies the visual style of the checkbox. Defaults to 'square', but can be customized with other styles.	string
supporting	Additional supporting text displayed below the main title.	string
title_text	The main text label displayed next to the checkbox.	string

Anatomy

Anatomy Options

Checkbox Icon: The visual checkbox element that indicates the selection state. Users can check or uncheck this icon to select or deselect an option.

Checkbox Label: The main label associated with the checkbox, providing a brief description of the option or action related to the checkbox.

Subtitle: Positioned below the checkbox title, the subtitle offers additional context or supporting information about the checkbox option, helping users understand the checkbox's purpose.

Dos and Don'ts

Dos	Don'ts
Use checkboxes when users need to select multiple options from a set.	Don't use checkboxes for single selection; use radio buttons for that purpose.
Label each checkbox clearly to indicate the option it represents.	Avoid using ambiguous or unclear labels for checkboxes.
Group related checkboxes together visually and logically.	Don't scatter related checkboxes throughout different parts of the UI.
Ensure checkboxes are large enough to be easily tappable or clickable.	Avoid making checkboxes too small to interact with comfortably.
Use consistent spacing between checkboxes in the same group.	Don't place checkboxes too close together or too far apart, which can hinder usability.
Provide a clear visual indication of the checked state.	Don't leave users guessing which options are currently selected.
Include appropriate aria-labels for accessibility.	Don't neglect accessibility requirements such as focus states and keyboard navigation.
Ensure each checkbox has sufficient contrast against its background.	Avoid using low contrast that can make the checkboxes difficult to see.