Introduction Foundations Components Directives Pipes Motion Brand

Alerts & notifications

Buttons & actions

Cards

Forms

Checkbox card Checkbox Currency input Date input Date range calendar File select Input Label Location input Multi select Multiple location input Otp input Phone input Radio Search Segmented date input Select Slider Smart textarea Textarea Timepicker Toggle

Icons / images / media

Layouts

Navigation

Popups / overlays

Progress & loading indicators

Tags

Typography

Components Forms Checkbox card

Checkbox card

Checkbox input with built-in layouting subcomponents

Contents

Default
Alignment
Border
Colors
Disable
Level
Validation

Checkbox Visible (Default)

This is a checkbox card with the checkbox shown.

The checkmark is visible on the left of the card.

Checkbox Hidden

This is a checkbox card with the checkbox hidden.

The card is still selectable, but the checkmark is not rendered. Useful when the card itself communicates selection.

Inputs in Hide checkbox
hideCheckbox ?: boolean = false
Also set in this example
control : FormControl<boolean>
border ?: CardBorder = 'none'
padding ?: CheckboxCardPadding = CheckboxCardPadding.MID