Checkbox Enhanced

An enhanced version of the Checkbox with space for custom content.

Overview

The Checkbox has an enhanced version (CheckboxEnhanced) when a label isn’t sufficient by itself. This button provides a space for a description or custom content. It is wrapped in a frame to highlight its clickable region.

Checkbox EnhancedCheckbox EnhancedNullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum etiam porta sem.Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum etiam porta sem.Checkbox Enhanced component.

Usage

The CheckboxEnhanced component allows the active selection of one input at a time. It typically appears in forms and modals. If you require the user to select single options, then the RadioEnhanced component should be used instead.

Anatomy

Checkbox EnhancedNullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum etiam porta sem.Anatomy of the Checkbox Enhanced component.3Title4Description2Checkbox1Frame
  1. Frame. Wraps the component, highlighting when hovered.
  2. Checkbox. A single value toggle.
  3. Title. Provides context to the Checkbox.
  4. Description (Optional). Additional information.

States

DefaultHover/ActiveCheckedRadio EnhancedNullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum etiam porta sem.Radio EnhancedNullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum etiam porta sem.Radio EnhancedNullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum etiam porta sem.Checkbox Enhanced component states.

The enhanced version of the Checkbox has three states - Default, Hover/Active, and Checked.

Variations

Checkbox EnhancedCustom content variation of the Checkbox Enhanced component.

The Enhanced Checkbox has a variation where custom content can be added in place of its description. The Checkbox and Title must remain in the component so the user knows what to expect with its functionality.