Checkbox Card

A selectable card component that behaves like a checkbox

#

Import

CheckboxCard - A selectable card component that behaves like a checkbox.
CheckboxGroup - Group wrapper for composing multiple checkbox cards.

import { CheckboxCard, CheckboxGroup } from "@dreamy-ui/react";

#

Usage

Default Checkbox Card

This is a description

<CheckboxCard title="Default Checkbox Card" description="This is a description" />

#

Variant

Change the variant of the checkbox card.

Outline variant

Description for Outline variant

Subtle variant

Description for Subtle variant

<VStack w='250px'>
	<CheckboxCard variant={"outline"} title={"Outline variant"} description={`Description for Outline variant`} />
	<CheckboxCard variant={"subtle"} title={"Subtle variant"} description={`Description for Subtle variant`} />
</VStack>

#

Checkbox variant

Change the checkbox variant of the checkbox card.

Solid variant

Description for Solid variant

Outline variant

Description for Outline variant

<VStack w='250px'>
	<CheckboxCard checkboxVariant={"solid"} title={"Solid variant"} description={`Description for Solid variant`} />
	<CheckboxCard checkboxVariant={"outline"} title={"Outline variant"} description={`Description for Outline variant`} />
</VStack>

#

Scheme

Change the color scheme of the checkbox card.

<VStack w='250px'>
	<CheckboxCard scheme={"primary"} defaultChecked title={"Primary"} description={`Description for Primary`} />
	<CheckboxCard scheme={"secondary"} defaultChecked title={"Secondary"} description={`Description for Secondary`} />
	<CheckboxCard scheme={"success"} defaultChecked title={"Success"} description={`Description for Success`} />
	<CheckboxCard scheme={"warning"} defaultChecked title={"Warning"} description={`Description for Warning`} />
	<CheckboxCard scheme={"error"} defaultChecked title={"Error"} description={`Description for Error`} />
	<CheckboxCard scheme={"info"} defaultChecked title={"Info"} description={`Description for Info`} />
</VStack>

#

Size

Change the checkbox card size.

Small

Description for Small

Medium

Description for Medium

Large

Description for Large

<VStack w='250px'>
	<CheckboxCard size={"sm"} title={"Small"} description={`Description for Small`} />
	<CheckboxCard size={"md"} title={"Medium"} description={`Description for Medium`} />
	<CheckboxCard size={"lg"} title={"Large"} description={`Description for Large`} />
</VStack>

#

Controlled

Use isChecked and onChange, onChangeValue to control the checkbox card.

Selected: false

Controlled

Description for Controlled

export function ControlledCheckboxCard() {
    const [isChecked, setIsChecked] = useState(false);
 
    return (
        <>
            <Text>Selected: {isChecked ? "true" : "false"}</Text>
            <VStack w="250px">
                <CheckboxCard
                    title="Controlled"
                    description="Description for Controlled"
                    isChecked={isChecked}
                    onChangeValue={setIsChecked}
                />
            </VStack>
        </>
    );
}

#

Checkbox Group

Use CheckboxGroup to compose multiple checkboxes or checkbox cards.

Selected: 1

Option 1

Description for Option 1

Option 2

Description for Option 2

Option 3

Description for Option 3

function CheckboxCardGroupControl() {
	const [value, setValue] = useState<Array<string | number>>(["1"]);
 
	return (
		<>
			<Text>Selected: {value.join(", ")}</Text>
			<CheckboxGroup
				value={value}
				onChange={setValue}
			>
				<CheckboxCard value="1" title="Option 1" description="Description for Option 1" />
				<CheckboxCard value="2" title="Option 2" description="Description for Option 2" />
				<CheckboxCard value="3" title="Option 3" description="Description for Option 3" />
			</CheckboxGroup>
		 </>
	);
}

Card

Checkbox