Checkbox Card

A control that can be toggled on or off.
Properties
disabled
checked
hideCheckbox
Example
Source Code
Installation
"use client";

import React from "react";
import { CheckboxCard } from "@/subframe/components/CheckboxCard";

function CheckboxCardExample() {
  return (
    <CheckboxCard
      disabled={false}
      hideCheckbox={false}
      checked={false}
      onCheckedChange={(checked: boolean) => {}}
    >
      <div className="flex flex-col items-start">
        <span className="text-body-bold font-body-bold text-default-font">
          Enable notifications
        </span>
        <span className="text-caption font-caption text-subtext-color">
          Be in the loop anytime something happens.
        </span>
      </div>
    </CheckboxCard>
  );
}

export default CheckboxCardExample;

Props

Checkbox Card
Prop
Type
Default
Additional info
disabled
boolean
false
hideCheckbox
boolean
false
children
React.ReactNode
checked
boolean
Checked state of the checkbox
onCheckedChange
(checked: boolean) => void
Handler called when the checked state of the checkbox changes.

Examples

Basics

Use checked and onCheckedChange props to control the checked state.