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.


    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.


    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.


    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

    Additional Resources

    Related topic:

    Our community is active and always welcoming to new ideas.