Checkbox Card - Dreamy UI

Checkbox Card

A selectable card component that behaves like a checkbox

#

Installation

pnpm dlx dreamy add checkbox-card

#

Usage

Checkbox Card is a multipart component. The hidden checkbox input is rendered automatically inside CheckboxCard.Root — pass all checkbox props to Root.

This is a description

<CheckboxCard.Root>
	<CheckboxCard.Header>
		<CheckboxCard.Title>Default Checkbox Card</CheckboxCard.Title>
		<CheckboxCard.Checkbox />
	</CheckboxCard.Header>
	<CheckboxCard.Description>This is a description</CheckboxCard.Description>
</CheckboxCard.Root>

#

With description

Add CheckboxCard.Description below the header for supporting text.

Description for React Router

Description for Next.js

Description for Vue.js

<CheckboxCard.Root full>
	<CheckboxCard.Header>
		<CheckboxCard.Title>React Router</CheckboxCard.Title>
		<CheckboxCard.Checkbox />
	</CheckboxCard.Header>
	<CheckboxCard.Description>Description for React Router</CheckboxCard.Description>
</CheckboxCard.Root>

#

Variant

Change the variant of the checkbox card.

Description for Outline variant

Description for Subtle variant

<CheckboxCard.Root full variant="outline">
	<CheckboxCard.Header>
		<CheckboxCard.Title>Outline variant</CheckboxCard.Title>
		<CheckboxCard.Checkbox />
	</CheckboxCard.Header>
	<CheckboxCard.Description>Description for Outline variant</CheckboxCard.Description>
</CheckboxCard.Root>

#

Checkbox variant

Change the checkbox variant of the checkbox card.

Description for Solid variant

Description for Outline variant

<CheckboxCard.Root full checkboxVariant="solid">
	<CheckboxCard.Header>
		<CheckboxCard.Title>Solid variant</CheckboxCard.Title>
		<CheckboxCard.Checkbox />
	</CheckboxCard.Header>
	<CheckboxCard.Description>Description for Solid variant</CheckboxCard.Description>
</CheckboxCard.Root>

#

Scheme

Change the color scheme of the checkbox card.

<CheckboxCard.Root full scheme="primary" defaultChecked>
	<CheckboxCard.Header>
		<CheckboxCard.Title>Primary</CheckboxCard.Title>
		<CheckboxCard.Checkbox />
	</CheckboxCard.Header>
	<CheckboxCard.Description>Description for Primary</CheckboxCard.Description>
</CheckboxCard.Root>

#

Size

Change the checkbox card size.

Description for Small

Description for Medium

Description for Large

<CheckboxCard.Root full size="sm">
	<CheckboxCard.Header>
		<CheckboxCard.Title>Small</CheckboxCard.Title>
		<CheckboxCard.Checkbox />
	</CheckboxCard.Header>
	<CheckboxCard.Description>Description for Small</CheckboxCard.Description>
</CheckboxCard.Root>

#

Controlled

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

Selected: false

Description for Controlled

export function ControlledCheckboxCard() {
    const [isChecked, setIsChecked] = useState(false);
 
    return (
        <>
            <Text>Selected: {isChecked ? "true" : "false"}</Text>
            <CheckboxCard.Root
                full
                isChecked={isChecked}
                onChangeValue={setIsChecked}
            >
                <CheckboxCard.Header>
                    <CheckboxCard.Title>Controlled</CheckboxCard.Title>
                    <CheckboxCard.Checkbox />
                </CheckboxCard.Header>
                <CheckboxCard.Description>Description for Controlled</CheckboxCard.Description>
            </CheckboxCard.Root>
        </>
    );
}

#

Checkbox Group

Use CheckboxGroup to compose multiple checkboxes or checkbox cards.

Selected: 1

Description for Option 1

Description for Option 2

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}
			>
				<Group full wrapped>
					<CheckboxCard.Root full value="1">
						<CheckboxCard.Header>
							<CheckboxCard.Title>Option 1</CheckboxCard.Title>
							<CheckboxCard.Checkbox />
						</CheckboxCard.Header>
						<CheckboxCard.Description>Description for Option 1</CheckboxCard.Description>
					</CheckboxCard.Root>
					<CheckboxCard.Root full value="2">
						<CheckboxCard.Header>
							<CheckboxCard.Title>Option 2</CheckboxCard.Title>
							<CheckboxCard.Checkbox />
						</CheckboxCard.Header>
						<CheckboxCard.Description>Description for Option 2</CheckboxCard.Description>
					</CheckboxCard.Root>
					<CheckboxCard.Root full value="3">
						<CheckboxCard.Header>
							<CheckboxCard.Title>Option 3</CheckboxCard.Title>
							<CheckboxCard.Checkbox />
						</CheckboxCard.Header>
						<CheckboxCard.Description>Description for Option 3</CheckboxCard.Description>
					</CheckboxCard.Root>
				</Group>
			</CheckboxGroup>
		 </>
	);
}

#

With icon

Use custom content inside CheckboxCard.Title or CheckboxCard.Description for richer layouts.

Description for React Router

Description for Next.js

Description for Vue.js

<CheckboxCard.Root full>
	<CheckboxCard.Header>
		<CheckboxCard.Title>
			<Flex col gap={2}> 
				<Icon as={<SiReactrouter />} boxSize="5" color="fg.medium" />
				<Text>React Router</Text>
			</Flex>
		</CheckboxCard.Title>
		<CheckboxCard.Checkbox />
	</CheckboxCard.Header>
	<CheckboxCard.Description>Description for React Router</CheckboxCard.Description>
</CheckboxCard.Root>

#

Hide checkbox indicator

Omit CheckboxCard.Checkbox to hide the checkbox indicator.

<CheckboxCard.Root full>
	<CheckboxCard.Header>
		<CheckboxCard.Title>
			<Flex full gap={2} row center>
				<Icon as={<FaPaypal />} boxSize="5" color="fg.medium" />
				<Text>Paypal</Text>
			</Flex>
		</CheckboxCard.Title>
	</CheckboxCard.Header>
</CheckboxCard.Root>

Checkbox

Close Button