checkbox-cards

11 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

CheckboxCards component structure

CheckboxCards is a themed Radix component based on the div element that consists of two main parts: CheckboxCards.Root as the container for multiple checkbox card items, and CheckboxCards.Item as individual selectable cards within the group. The component supports common margin props.

CheckboxCards defaultValue prop

CheckboxCards.Root accepts a defaultValue prop that takes an array of strings representing the values of items to be selected by default. For example, defaultValue={["1"]} selects the item with value "1" on initial render.

CheckboxCards columns prop for responsive layout

CheckboxCards.Root accepts a columns prop that controls the grid layout. It can accept a single value or an object with responsive breakpoints (e.g., columns={{ initial: "1", sm: "3" }} renders 1 column initially and 3 columns at the sm breakpoint).

CheckboxCards size prop

CheckboxCards.Root accepts a size prop that controls the size of the checkbox cards. Available sizes are "1", "2", and "3".

CheckboxCards variant prop

CheckboxCards.Root accepts a variant prop to control the visual style. Available variants include "surface" and "classic".

CheckboxCards color prop

CheckboxCards.Root accepts a color prop to assign a specific color from the Radix theme. Available colors demonstrated in the documentation include indigo, cyan, orange, and crimson.

CheckboxCards highContrast prop

CheckboxCards.Root accepts a highContrast prop that when set to true increases the color contrast of the component with the background.

CheckboxCards.Item disabled prop

CheckboxCards.Item accepts a disabled prop that when set to true makes that individual card item non-interactive and prevents it from being selected.

CheckboxCards.Item value prop

CheckboxCards.Item requires a value prop that is a string used to identify the item in the defaultValue array and in form submissions. The value must be unique within the CheckboxCards.Root.

CheckboxCards multiple selection behavior

CheckboxCards allows multiple options to be selected at a time, functioning as a group of interactive cards where users can check or uncheck individual items independently.

CheckboxCards basic example

Example showing CheckboxCards with three product items: A1 Keyboard (US Layout), Pro Mouse (Zero-lag wireless), and Lightning Mat (Wireless charging). The root is set up with defaultValue={["1"]} and responsive columns={{ initial: "1", sm: "3" }}. Content is structured using Flex and Text components from Radix Themes.

Give your agent this brain