> ## Documentation Index
> Fetch the complete documentation index at: https://prefab.prefect.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# ChoiceCard
> Bordered, clickable card for toggle controls.
export const ComponentPreview = ({json, height, resizable, bare, hideJson, playground, children}) => {
const hostRef = React.useRef(null);
const handleRef = React.useRef(null);
const cardRef = React.useRef(null);
const containerRef = React.useRef(null);
const [previewWidth, setPreviewWidth] = React.useState(null);
const [isDragging, setIsDragging] = React.useState(false);
const [playgroundHref, setPlaygroundHref] = React.useState(null);
React.useEffect(function () {
if (!playground) return;
var isLocal = location.hostname === "localhost" || location.hostname === "127.0.0.1";
var path = isLocal ? "/playground" : "/docs/playground";
var url = new URL(path, window.location.href);
url.hash = "code=" + playground;
setPlaygroundHref(url.href);
}, [playground]);
var jsonStr = typeof json === "string" ? json : JSON.stringify(json, null, 2);
React.useEffect(function () {
if (cardRef.current) {
var card = cardRef.current.closest(".group");
if (card) card.classList.remove("group");
}
var host = hostRef.current;
if (!host || !json) return;
function mount() {
if (!window.__prefab || !host) return;
var dark = document.documentElement.classList.contains("dark");
handleRef.current = window.__prefab.mountPreview(host, jsonStr, {
dark: dark
});
if (bare && host.shadowRoot) {
var m = host.shadowRoot.querySelector("[data-prefab-mount]");
if (m) m.style.background = "transparent";
}
}
if (window.__prefab) {
mount();
} else {
if (!window.__prefabLoading) {
if (!window.__prefabReady) {
var s = document.createElement("script");
s.src = "/renderer.js";
document.head.appendChild(s);
}
window.__prefabLoading = new Promise(function (resolve) {
function check() {
if (window.__prefabReady) {
window.__prefabReady.then(resolve);
} else {
setTimeout(check, 10);
}
}
check();
});
}
window.__prefabLoading.then(mount);
}
var observer = new MutationObserver(function () {
var dark = document.documentElement.classList.contains("dark");
if (handleRef.current) handleRef.current.setDark(dark);
});
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ["class"]
});
return function () {
observer.disconnect();
if (handleRef.current) {
handleRef.current.unmount();
handleRef.current = null;
}
};
}, [json]);
function startResize(e) {
e.preventDefault();
var startX = e.clientX;
var startW = hostRef.current ? hostRef.current.offsetWidth : 0;
var maxW = containerRef.current ? containerRef.current.offsetWidth - 10 : startW;
setIsDragging(true);
function onMove(ev) {
var w = Math.max(260, Math.min(startW + (ev.clientX - startX), maxW));
setPreviewWidth(w);
}
function onUp() {
document.removeEventListener("mousemove", onMove);
document.removeEventListener("mouseup", onUp);
setIsDragging(false);
}
document.addEventListener("mousemove", onMove);
document.addEventListener("mouseup", onUp);
}
if (bare) {
return ;
}
if (resizable) {
return
{previewWidth &&
{previewWidth}px
}
{playgroundHref && }
{children}
;
}
return
{playgroundHref && }
{children}
;
};
ChoiceCard is a [Field](/components/field) that renders as a bordered card. Clicking anywhere on the card — the title, description, or empty space — toggles the wrapped control. When toggled on, the card highlights with a subtle border and background tint.
## Basic Usage
Place a `FieldContent` (with title and description) alongside a toggle control like Switch or Checkbox.
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import (
ChoiceCard, Column, FieldContent, FieldDescription, FieldTitle, Switch,
)
with Column(gap=4):
with ChoiceCard():
with FieldContent():
FieldTitle("Marketing emails")
FieldDescription(
"Receive emails about new products and features."
)
Switch()
with ChoiceCard():
with FieldContent():
FieldTitle("Security emails")
FieldDescription(
"Receive emails about your account activity."
)
Switch(value=True)
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"cssClass": "gap-4",
"type": "Column",
"children": [
{
"type": "ChoiceCard",
"invalid": false,
"disabled": false,
"children": [
{
"type": "FieldContent",
"children": [
{"type": "FieldTitle", "content": "Marketing emails"},
{
"type": "FieldDescription",
"content": "Receive emails about new products and features."
}
]
},
{
"name": "switch_1",
"value": false,
"type": "Switch",
"size": "default",
"disabled": false,
"required": false
}
]
},
{
"type": "ChoiceCard",
"invalid": false,
"disabled": false,
"children": [
{
"type": "FieldContent",
"children": [
{"type": "FieldTitle", "content": "Security emails"},
{
"type": "FieldDescription",
"content": "Receive emails about your account activity."
}
]
},
{
"name": "switch_2",
"value": true,
"type": "Switch",
"size": "default",
"disabled": false,
"required": false
}
]
}
]
},
"state": {"switch_1": false, "switch_2": true}
}
```
## With Checkbox
ChoiceCard works with any toggle control.
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import (
Checkbox, ChoiceCard, Column, FieldContent, FieldDescription, FieldTitle,
)
with Column(gap=4):
with ChoiceCard():
with FieldContent():
FieldTitle("Accept terms")
FieldDescription(
"You agree to our Terms of Service and Privacy Policy."
)
Checkbox()
with ChoiceCard():
with FieldContent():
FieldTitle("Subscribe to newsletter")
FieldDescription("Get weekly updates on new features.")
Checkbox(value=True)
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"cssClass": "gap-4",
"type": "Column",
"children": [
{
"type": "ChoiceCard",
"invalid": false,
"disabled": false,
"children": [
{
"type": "FieldContent",
"children": [
{"type": "FieldTitle", "content": "Accept terms"},
{
"type": "FieldDescription",
"content": "You agree to our Terms of Service and Privacy Policy."
}
]
},
{
"name": "checkbox_10",
"value": false,
"type": "Checkbox",
"disabled": false,
"required": false
}
]
},
{
"type": "ChoiceCard",
"invalid": false,
"disabled": false,
"children": [
{
"type": "FieldContent",
"children": [
{"type": "FieldTitle", "content": "Subscribe to newsletter"},
{"type": "FieldDescription", "content": "Get weekly updates on new features."}
]
},
{
"name": "checkbox_11",
"value": true,
"type": "Checkbox",
"disabled": false,
"required": false
}
]
}
]
},
"state": {"checkbox_10": false, "checkbox_11": true}
}
```
## Disabled
A disabled ChoiceCard dims the entire card and prevents interaction.
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import (
ChoiceCard, Column, FieldContent, FieldDescription, FieldTitle, Switch,
)
with Column(gap=4):
with ChoiceCard():
with FieldContent():
FieldTitle("Enabled option")
FieldDescription("You can toggle this.")
Switch(value=True)
with ChoiceCard(disabled=True):
with FieldContent():
FieldTitle("Disabled option")
FieldDescription("This cannot be changed.")
Switch(disabled=True)
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"cssClass": "gap-4",
"type": "Column",
"children": [
{
"type": "ChoiceCard",
"invalid": false,
"disabled": false,
"children": [
{
"type": "FieldContent",
"children": [
{"type": "FieldTitle", "content": "Enabled option"},
{"type": "FieldDescription", "content": "You can toggle this."}
]
},
{
"name": "switch_3",
"value": true,
"type": "Switch",
"size": "default",
"disabled": false,
"required": false
}
]
},
{
"type": "ChoiceCard",
"invalid": false,
"disabled": true,
"children": [
{
"type": "FieldContent",
"children": [
{"type": "FieldTitle", "content": "Disabled option"},
{"type": "FieldDescription", "content": "This cannot be changed."}
]
},
{
"name": "switch_4",
"value": false,
"type": "Switch",
"size": "default",
"disabled": true,
"required": false
}
]
}
]
},
"state": {"switch_3": true, "switch_4": false}
}
```
## API Reference
ChoiceCard inherits all props from [Field](/components/field).
Whether the card is in an error state. Cascades red text to all children.
Whether the card is dimmed and non-interactive.
Additional Tailwind CSS classes.
Title text.
Description text.
Container that groups FieldTitle and FieldDescription on the left side of the card.
## Protocol Reference
```json ChoiceCard theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"type": "ChoiceCard",
"children?": "[Component]",
"let?": "object",
"invalid?": false,
"disabled?": false,
"cssClass?": "string"
}
```
```json FieldTitle theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"type": "FieldTitle",
"content": "string (required)"
}
```
```json FieldDescription theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"type": "FieldDescription",
"content": "string (required)"
}
```
```json FieldContent theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"type": "FieldContent",
"children?": "[Component]"
}
```
For the complete protocol schema, see [ChoiceCard](/protocol/choice-card).