Checkbox

Enhance Choices with Stylish Checkboxes

Our checkbox component is a user-friendly and visually intuitive UI element designed to enhance decision-making in your application or website. With a clear and straightforward design, it simplifies binary choices, making interactions smooth and engaging for users.

Anatomy

The checkbox features a small box with a checkmark or indicator representing its selected state. Accompanied by a label, users interact by clicking or tapping, toggling between selected and unselected states. Its simplicity makes it an effective UI element for binary choices.

anatomy of checkbox component

Properties

Key properties like "checked" determine the checkbox state, while "disabled" prevents user interaction when activated. The "label" associates descriptive text, enhancing usability. Events such as "change" trigger dynamic responses to user actions, offering developers customization options for functionality and appearance in the interface.

Checked	Indeterminate	State	Size
True	True	Default	Small
False	False	Hover	Medium
		Press	Large
		Error
		Require
		Read-only
		Disabled

Status

• Default checkbox is the initial state when the checkbox is rendered, allowing users to make a conscious selection.

• Checked checkbox indicates user affirmation or consent and is visually represented by a marked or filled checkbox.

• Indeterminate checkbox represents a state where a checkbox's selection status is not explicitly checked or unchecked. It’s often 
used in scenarios where a checkbox group has a mix of selected and unselected items.

React

import React from 'react';
import { PlusCheckbox } from '@plusui/react';

const CheckboxExamples = () => (
  <>
    <PlusCheckbox>Checkbox</PlusCheckbox>  {/* Normal checkbox */}
    <PlusCheckbox checked>Checkbox</PlusCheckbox>  {/* Checked checkbox */}
    <PlusCheckbox indeterminate>Checkbox</PlusCheckbox>  {/* Indeterminate checkbox */}
  </>
);

export default CheckboxExamples;

Angular

<plus-checkbox>Checkbox</plus-checkbox>  <!-- Normal checkbox -->
<plus-checkbox checked>Checkbox</plus-checkbox>  <!-- Checked checkbox -->
<plus-checkbox indeterminate>Checkbox</plus-checkbox>  <!-- Indeterminate checkbox -->

Vue

<template>
  <plus-checkbox>Checkbox</plus-checkbox>  <!-- Normal checkbox -->
  <plus-checkbox checked>Checkbox</plus-checkbox>  <!-- Checked checkbox -->
  <plus-checkbox indeterminate>Checkbox</plus-checkbox>  <!-- Indeterminate checkbox -->
</template>

Javascript

<plus-checkbox>Checkbox</plus-checkbox>  <!-- Normal checkbox -->
<plus-checkbox checked>Checkbox</plus-checkbox>  <!-- Checked checkbox -->
<plus-checkbox indeterminate>Checkbox</plus-checkbox>  <!-- Indeterminate checkbox -->

State

The checkbox supports various visual states, enhancing its adaptability.

• Default checkbox is the standard appearance when not interacting.

• Hover checkbox is the visual change that occurs when the user hovers over the checkbox

• Press checkbox is the appearance when the user clicks or taps on the checkbox.

• Read-only checkbox state ensures that users can view the checkbox state but cannot modify it.

• Disabled checkbox state implies that the checkbox is not only non-interactive but also visually subdued to convey its inactive status.

React

import React from 'react';
import { PlusCheckbox } from '@plusui/react';

const CheckboxStates = () => (
  <>
    <PlusCheckbox>Checkbox</PlusCheckbox>  {/* Normal state */}
    <PlusCheckbox readOnly>Checkbox</PlusCheckbox>  {/* Readonly state */}
    <PlusCheckbox disabled>Checkbox</PlusCheckbox>  {/* Disabled state */}
  </>
);

export default CheckboxStates;

Angular

<plus-checkbox>Checkbox</plus-checkbox>  <!-- Normal state -->
<plus-checkbox readonly>Checkbox</plus-checkbox>  <!-- Readonly state -->
<plus-checkbox disabled>Checkbox</plus-checkbox>  <!-- Disabled state -->

Vue

<template>
  <plus-checkbox>Checkbox</plus-checkbox>  <!-- Normal state -->
  <plus-checkbox readonly>Checkbox</plus-checkbox>  <!-- Readonly state -->
  <plus-checkbox disabled>Checkbox</plus-checkbox>  <!-- Disabled state -->
</template>

Javascript

<plus-checkbox>Checkbox</plus-checkbox>  <!-- Normal state -->
<plus-checkbox readonly>Checkbox</plus-checkbox>  <!-- Readonly state -->
<plus-checkbox disabled>Checkbox</plus-checkbox>  <!-- Disabled state -->

Size

The size property offers flexibility in design, allowing developers to choose from small, medium, and large checkboxes based on their application's aesthetic and layout preferences.

React

import React from 'react';
import { PlusCheckbox } from '@plusui/react';

const CheckboxWithSizes = () => (
  <>
    <PlusCheckbox size="sm">Small Checkbox</PlusCheckbox>
    <PlusCheckbox size="md">Medium Checkbox</PlusCheckbox>
    <PlusCheckbox size="lg">Large Checkbox</PlusCheckbox>
  </>
);

export default CheckboxWithSizes;

Angular

<plus-checkbox size="sm">Small Checkbox</plus-checkbox>
<plus-checkbox size="md">Medium Checkbox</plus-checkbox>
<plus-checkbox size="lg">Large Checkbox</plus-checkbox>

Vue

<template>
  <plus-checkbox size="sm">Small Checkbox</plus-checkbox>
  <plus-checkbox size="md">Medium Checkbox</plus-checkbox>
  <plus-checkbox size="lg">Large Checkbox</plus-checkbox>
</template>

Javascript

<plus-checkbox size="sm">Small Checkbox</plus-checkbox>
<plus-checkbox size="md">Medium Checkbox</plus-checkbox>
<plus-checkbox size="lg">Large Checkbox</plus-checkbox>

Status

• Error checkbox is the visual cue indicating an error state, often accompanied by an error message.

React

import React from 'react';
import { PlusCheckbox } from '@plusui/react';

const CheckboxWithRequiredAndError = () => (
  <PlusCheckbox required error caption="This is a required field with an error">
    Checkbox
  </PlusCheckbox>
);

export default CheckboxWithRequiredAndError;

Angular

<plus-checkbox required error caption="This is a required field with an error">Checkbox</plus-checkbox>

Vue

<template>
  <plus-checkbox required error caption="This is a required field with an error">Checkbox</plus-checkbox>
</template>

Javascript

<plus-checkbox required error caption="This is a required field with an error">Checkbox</plus-checkbox>

Required

Required checkbox is s state emphasizing the mandatory nature of the checkbox, typically for required fields, with a distinct visual representation.

React

import React from 'react';
import { PlusCheckbox } from '@plusui/react';

const CheckboxWithRequired = () => (
  <PlusCheckbox required caption="This is a required field">
    Checkbox
  </PlusCheckbox>
);

export default CheckboxWithRequired;

Angular

<plus-checkbox required caption="This is a required field">Checkbox</plus-checkbox>

Vue

<template>
  <plus-checkbox required caption="This is a required field">Checkbox</plus-checkbox>
</template>

Javascript

<plus-checkbox required caption="This is a required field">Checkbox</plus-checkbox>

Checkbox Group

The Checkbox Group inherits essential properties from the Checkbox, offering seamless integration and consistent behavior. With two additional properties, vertical and horizontal, customization becomes effortless, allowing you to tailor the layout of your checkbox group according to your design preferences. The power lies in the ability to fine-tune the appearance of each checkbox within the group by leveraging the customizable properties inherited from Plus UI's Checkbox component.

React

import React from 'react';
import { PlusCheckboxGroup, PlusCheckbox } from '@plusui/react';

const CheckboxGroupForUILibrary = () => (
  <PlusCheckboxGroup label="UI Library Preferences:">
    <PlusCheckbox>Responsive Design</PlusCheckbox>
    <PlusCheckbox>Customizable Themes</PlusCheckbox>
    <PlusCheckbox>Accessibility Features</PlusCheckbox>
  </PlusCheckboxGroup>
);

export default CheckboxGroupForUILibrary;

Angular

<plus-checkbox-group label="UI Library Preferences:">
  <plus-checkbox>Responsive Design</plus-checkbox>
  <plus-checkbox>Customizable Themes</plus-checkbox>
  <plus-checkbox>Accessibility Features</plus-checkbox>
</plus-checkbox-group>

Vue

<template>
  <plus-checkbox-group label="UI Library Preferences:">
    <plus-checkbox>Responsive Design</plus-checkbox>
    <plus-checkbox>Customizable Themes</plus-checkbox>
    <plus-checkbox>Accessibility Features</plus-checkbox>
  </plus-checkbox-group>
</template>

Javascript

<plus-checkbox-group label="UI Library Preferences:">
  <plus-checkbox>Responsive Design</plus-checkbox>
  <plus-checkbox>Customizable Themes</plus-checkbox>
  <plus-checkbox>Accessibility Features</plus-checkbox>
</plus-checkbox-group>

Layout & Spacing

The layout and spacing of checkbox components play a crucial role in user interface design. Proper alignment and spacing contribute to a visually organized and intuitive form, reducing clutter and enhancing user experience. Consistency in layout ensures that users can quickly identify and interact with checkboxes, creating a cohesive design.

layout and spacing of checkbox component

Light & Dark Mode

Checkbox components should seamlessly adapt to both light and dark modes to enhance overall user experience. Considerate color choices and contrast adjustments are essential for maintaining visibility and readability in different lighting conditions. Ensuring a harmonious transition between modes allows users to comfortably engage with checkboxes regardless of the interface's overall theme.

light and dark mode of checkbox component

Accessibility

Accessibility is paramount in checkbox component design, aiming to make them usable for everyone, including individuals with disabilities. This involves providing clear labels, employing proper focus indicators, ensuring keyboard navigation, and utilizing ARIA roles. By prioritizing accessibility, designers contribute to an inclusive digital environment where all users can engage with checkbox components effortlessly.

Criteria	Description	Status
ARIA Hidden Elements	Ensures aria-hidden elements are not focusable nor contain focusable elements	✔️ Passed
Inline Text Spacing	Ensure that text spacing set through style attributes can be adjusted with custom stylesheets	✔️ Passed
ID’s of active elements	Ensures every id attribute value of active elements is unique	✔️ Passed
ID Attribute	Ensures every id attribute value is unique	✔️ Passed
Discernible Text	Ensures links have discernible text	✔️ Passed
Tabindex Attribute	Ensures tabindex attribute values are not greater than 0	✔️ Passed
Color Contrast	Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds.	✔️ AA ~ AAA

Design System

Plus UI Design System | Figma CommunityFigma

Plus UI Design System on Figma

API

Property	Description	Type	Default
label	Label of the checkbox	string	-
name	Name of the checkbox	string	-
value	Value of the checkbox	string	-
required	Whether the checkbox is required	boolean	false
disabled	Whether the checkbox is disabled	boolean	false
readonly	Whether the checkbox is readonly	boolean	false
checked	Whether the checkbox is checked	boolean	false
indeterminate	Whether the checkbox is indeterminate	boolean	false
plus-change	Emitted when the checked property changes	event	-