Choice Card
Presents an option as a whole selectable card with a title and a supporting line.
Automatic
Deploys every approved change.
Manual
You confirm each change.
Configurations
Supported configurations for this component.
States
Interaction states covered by the API and the style contract.
Configurations
3 examplesAutomatic
Deploys every approved change.
Manual
You confirm each change.
Keep activity history
Store events for 90 days.
Send crash reports
Share errors so we can fix them.
Status updates
Post status to your team channel.
Night mode
Dim the interface after hours.
States
7 examplesKeep activity history
Store events for 90 days.
Keep activity history
Store events for 90 days.
Keep activity history
Store events for 90 days.
Keep activity history
Store events for 90 days.
Keep activity history
Store events for 90 days.
Keep activity history
Store events for 90 days.
Keep activity history
Store events for 90 days.
Keep activity history
Store events for 90 days.
Keep activity history
Store events for 90 days.
Keep activity history
Store events for 90 days.
Automatic
Deploys every approved change.
Manual
You confirm each change.
Add to your project
One command adds this component to your project.
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/••••••••••••Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").
Props
Every prop this component accepts. Any other prop is forwarded to the underlying element.
ChoiceCard
| Prop | Type | Default | Description |
|---|---|---|---|
| titlereq | React.ReactNode | - | Primary option name; display content only, with no nested interactive element. |
| description | React.ReactNode | - | Optional supporting line; display content only, with no nested interactive element. |
| control | 'radio'|'checkbox'|'toggle' | 'radio' | Native control used as the state indicator. |
| value | string | - | Native input value; required for radio cards inside ChoiceCardGroup. |
| checked | boolean | - | Controlled checked state. |
| defaultChecked | boolean | false | Initial checked state in uncontrolled mode. |
| onCheckedChange | (next: boolean) => void | - | Called with the next checked state. |
| size | 'md'|'lg' | 'md' | Size passed to the nested control. |
| disabled | boolean | false | Disables the native control and dims the whole card. |
| id | string | - | Native input id; auto-generated when omitted. |
| name | string | - | Native input name; a ChoiceCardGroup supplies this to radio cards. |
| className | string | - | Extra classes merged onto the Card root. |
| style | React.CSSProperties | - | Inline styles merged onto the Card root. |
ChoiceCardGroup
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | - | Shared native name for the group's radio cards; auto-generated when omitted. |
| value | string | - | Selected value in controlled mode. |
| defaultValue | string | - | Initially selected value in uncontrolled mode. |
| onValueChange | (next: string) => void | - | Called with the newly selected value. |
| disabled | boolean | false | Disables every radio card in the group. |
| children | React.ReactNode | - | ChoiceCard elements using control="radio" and unique values. |
| className | string | - | Extra classes merged onto the radiogroup wrapper. |
| style | React.CSSProperties | - | Inline styles merged onto the radiogroup wrapper. |
| aria-orientation | 'vertical'|'horizontal' | 'vertical' | Direction exposed to assistive technology; native radio arrow keys handle both axes. |
AI Canvas