Checkbox Card

Used to select or deselect options displayed within cards.

Next.js

<CheckboxCard label="Next.js" />

Examples

Description

Use the description prop to add a description to the checkbox card.

Next.js

Best for apps

<CheckboxCard label="Next.js" description="Best for apps" />

States

Pass the disabled or invalid prop to the Checkbox component to change the visual state of the checkbox.

Disabled

Readonly

Invalid

<div className="flex max-w-sm flex-col gap-2">
  <CheckboxCard label="Disabled" disabled />
  <CheckboxCard label="Disabled" defaultChecked disabled />
  <CheckboxCard label="Readonly" readOnly />
  <CheckboxCard label="Invalid" invalid />
</div>