Checkbox

Use the Checkbox Component to allow the user make a selection, which most often expresses a preference or agreement in a form. The Checkbox is visually identical to the Ignite UI for Angular Checkbox Component

Checkbox Demo

Interaction State

The checkbox can be inserted in an Enabled or Disabled state. In Sketch and Adobe XD you should select the state prior to inserting the component. In Figma, however, we've added more states such as Enabled & Invalid, Enabled & Hover, Enabled Hover & Invalid, Enabled & Focused, and Enabled Focused & Invalid, which can be switched in the properties panel.

Layout Template

In Sketch, the Checkbox supports label position variants where the Checkbox label is placed after or before the Checkbox element. In Figma, you can change the label's position by using the "Label Position" property. In Adobe XD, we are using Stacks to allow you to change the label and checkbox positions at design time simply by dragging it to the left or right of the checkbox visual.

State

The Checkbox provides On, Off, and Indeterminate selection states. In Figma, you can switch the selection state using the "State" property from the properties panel. In Sketch this is achieved with Symbol Overrides, while in Adobe XD we are using the Component States paradigm to let you easily switch between states.

Styling

The Checkbox comes with styling flexibility through the various options for its check and fill colors, as well as mechanisms to set a label position and color.

Usage

When many Checkboxes are necessary, you'll want to arrange them in a column group which makes it really easy to scan quickly through the list. Fewer Checkboxes may also be arranged on a single line next to each other but you should avoid arrangements in multiple columns.

Do	Don't