Skip to main content
ChoiceCard is a 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.

​
With Checkbox

ChoiceCard works with any toggle control.

​
Disabled

A disabled ChoiceCard dims the entire card and prevents interaction.

​
API Reference

ChoiceCard

ChoiceCard inherits all props from Field.
​
invalid
bool | str
default:"False"
Whether the card is in an error state. Cascades red text to all children.
​
disabled
bool | str
default:"False"
Whether the card is dimmed and non-interactive.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

FieldTitle

​
content
str
required
Title text.

FieldDescription

​
content
str
required
Description text.

FieldContent

Container that groups FieldTitle and FieldDescription on the left side of the card.

​
Protocol Reference

ChoiceCard
{
  "type": "ChoiceCard",
  "children?": "[Component]",
  "let?": "object",
  "invalid?": false,
  "disabled?": false,
  "cssClass?": "string"
}
FieldTitle
{
  "type": "FieldTitle",
  "content": "string (required)"
}
FieldDescription
{
  "type": "FieldDescription",
  "content": "string (required)"
}
FieldContent
{
  "type": "FieldContent",
  "children?": "[Component]"
}
For the complete protocol schema, see ChoiceCard.