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.
​
bool | str
default:"False"
Whether the card is in an error state. Cascades red text to all children.
​
bool | str
default:"False"
Whether the card is dimmed and non-interactive.
​
str | None
default:"None"
Additional Tailwind CSS classes.

FieldTitle

​
str
required
Title text.

FieldDescription

​
str
required
Description text.

FieldContent

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

​
Protocol Reference

ChoiceCard
FieldTitle
FieldDescription
FieldContent
For the complete protocol schema, see ChoiceCard.