Checkbox

Molecule

Used for multiple choice settings or actions - one or more items from a set - that may a require a user’s approval or consideration before submission or saving. Checkboxes can turn an option on or off, or can be used for an indeterminate state where you can select all, none, or some actions. You can also use a single checkbox to allow a user to enable or disable a feature or setting, along with a save button. It is suggested to use Checkbox for 5 or fewer options to the users. If you are presenting more than 5 options, use the Multiselect component, which uses a dropdown menu.

Parent and Child checkboxes: Checkboxes can have a parent-child relationship with other checkboxes. When the parent checkbox is checked, all child checkboxes are checked. If a parent checkbox is unchecked, all child checkboxes are unchecked. If some, but not all, child checkboxes are checked, the parent checkbox becomes an indeterminate checkbox.

Playground

Label

Tooltip

Label Position

TrailingLeading

Leading

Color Variant

LilaGrape

Lila

Label Size

DefaultLarge

Large

Indeterminate

Disabled

Label

        
          

            <
            Checkbox

            





            

                label
              
                =
                "Label"
              

                colorVariant
              
                =
                "lila"
              

                labelCategory
              
                =
                "large"
              

                labelPosition
              
                =
                "labelLeading"
              



  />

Anatomy

• Box - represents if the particular status.
• Icon - indicates status using a check or minus.
• Form Label - the description of what is being controlled by this particular Checkbox. Labels can be as short as a word or a phrase or as long as a paragraph. Component’s native label can be hidden. No need to include “Checked” and “Unchecked” texts as Label since the Checkbox status is sufficient in itself. The label can optionally be made non-clickable. The Label is to be located to the right of the box with a 12px gap. Different configurations can be made by combining a checkbox with a Label separately.
• Container - holds the box and label, it is the default clickable area.

States

Default, Hover, Pressed, Focus and Locked states.

Color

Lila or Grape

Properties

export interface CheckboxProps extends Omit<FormLabelOptionalProps, 'clickableLabel'> {
  modelValue: boolean;
  indeterminate?: boolean;
  colorVariant?: CheckboxColorVariant;
  disabled?: boolean;
}

export type CheckboxColorVariant = 'lila' | 'grape';
export type CheckboxIconType = 'tick_bold' | 'minus_bold';

export type FormLabelCategory = "compact" | "default";
export type FormLabelPosition = "labelLeading" | "labelTrailing" | "labelAbove";

export interface FormLabelProps extends TooltipProps {
  label?: string;
  tooltip?: string;
  labelCategory: FormLabelCategory;
  labelPosition: FormLabelPosition,
  disabled?: boolean;
  required?: boolean;
  clickableLabel?: boolean;
}