fix(choice): align styling with library theme and add resolved state recipe

- Use secondary variant for selected options instead of heavy primary fill
- Add cursor-pointer and conditional multi-line overrides matching Suggestion pattern
- Simplify inner content structure when no description is present
- Handle output-available state in AI SDK docs example
- Replace domain-specific example data with generic AI content
- Add resolved state section to documentation

Author: MaskyS

apps/docs/content/components/(chatbot)/choice.mdx

@@ -4,7 +4,7 @@ description: A composable component for AI-driven clarification prompts where us
 path: elements/components/choice
 ---
 
-The `Choice` component is designed for AI workflows where the model asks users to resolve ambiguity with structured options (timeframe, severity, scope, category, and similar constraints).
+The `Choice` component lets users pick from a set of options when an AI model needs clarification before continuing.
 
 <Preview path="choice" />
 
@@ -22,7 +22,10 @@ Add the following component to your frontend:
 "use client";
 
 import type { ToolUIPart, UIMessage } from "ai";
-import { DefaultChatTransport, lastAssistantMessageIsCompleteWithToolCalls } from "ai";
+import {
+  DefaultChatTransport,
+  lastAssistantMessageIsCompleteWithToolCalls,
+} from "ai";
 import { useChat } from "@ai-sdk/react";
 import {
   Choice,
@@ -52,9 +55,8 @@ type AskUserPart = ToolUIPart<{
   };
 }>;
 
-const isAskUserPart = (
-  part: UIMessage["parts"][number]
-): part is AskUserPart => part.type === "tool-ask_user";
+const isAskUserPart = (part: UIMessage["parts"][number]): part is AskUserPart =>
+  part.type === "tool-ask_user";
 
 const Example = () => {
   const { messages, addToolOutput, status } = useChat({
@@ -73,6 +75,21 @@ const Example = () => {
               return null;
             }
 
+            // Show compact summary when choice has been submitted
+            if (part.state === "output-available") {
+              const output = part.output;
+              const values = Array.isArray(output) ? output : [output];
+              const labels = values.map(
+                (v) =>
+                  part.input.options.find((o) => o.value === v)?.label ?? v
+              );
+              return (
+                <ChoiceStatus key={part.toolCallId}>
+                  {labels.join(", ")}
+                </ChoiceStatus>
+              );
+            }
+
             const multiSelect = Boolean(part.input.multi_select);
             const allowSubmit =
               part.state === "input-available" || part.state === "output-error";
@@ -109,7 +126,8 @@ const Example = () => {
                 ) : null}
                 {part.state === "output-error" ? (
                   <ChoiceStatus status="error">
-                    {part.errorText ?? "Could not submit your selection. Try again."}
+                    {part.errorText ??
+                      "Could not submit your selection. Try again."}
                   </ChoiceStatus>
                 ) : null}
               </Choice>
@@ -127,7 +145,13 @@ export default Example;
 Add the following route to your backend:
 
 ```ts title="app/api/chat/route.ts"
-import { convertToModelMessages, stepCountIs, streamText, tool, UIMessage } from "ai";
+import {
+  convertToModelMessages,
+  stepCountIs,
+  streamText,
+  tool,
+  UIMessage,
+} from "ai";
 import { z } from "zod";
 
 export async function POST(req: Request) {
@@ -169,7 +193,7 @@ export async function POST(req: Request) {
 - Optional auto-submit on single selection
 - Built-in confirm action for multi-select workflows
 - Keyboard and screen-reader friendly option semantics
-- Composable structure for custom layouts and states
+- Composable structure for custom layouts and resolved states
 
 ## Examples
 
@@ -181,6 +205,10 @@ export async function POST(req: Request) {
 
 <Preview path="choice-multiple" />
 
+### Resolved State
+
+After submission, replace the interactive options with a compact summary. Both examples above demonstrate this pattern — select an option to see the resolved view.
+
 ## Props
 
 ### `<Choice />`

packages/elements/src/choice.tsx

@@ -210,7 +210,7 @@ export const ChoiceOption = ({
   } = useChoiceContext();
 
   const isSelected = selectedValues.includes(value);
-  const resolvedVariant = variant ?? (isSelected ? "default" : "outline");
+  const resolvedVariant = variant ?? (isSelected ? "secondary" : "outline");
 
   const handleClick = useCallback(
     (event: MouseEvent<HTMLButtonElement>) => {
@@ -231,7 +231,9 @@ export const ChoiceOption = ({
       aria-describedby={description ? descriptionId : undefined}
       aria-pressed={isSelected}
       className={cn(
-        "h-auto max-w-full justify-start rounded-full px-4 py-2 text-left whitespace-normal",
+        "cursor-pointer rounded-full px-4",
+        description &&
+          "h-auto py-2 max-w-full justify-start text-left whitespace-normal",
         className
       )}
       disabled={disabled || rootDisabled}
@@ -241,17 +243,19 @@ export const ChoiceOption = ({
       {...props}
       onClick={handleClick}
     >
-      <span className="flex flex-col items-start gap-1">
-        <span>{children ?? value}</span>
-        {description ? (
+      {description ? (
+        <span className="flex flex-col items-start gap-1">
+          <span>{children ?? value}</span>
           <span
             className="text-muted-foreground text-xs leading-snug"
             id={descriptionId}
           >
             {description}
           </span>
-        ) : null}
-      </span>
+        </span>
+      ) : (
+        (children ?? value)
+      )}
     </Button>
   );
 };

packages/examples/src/choice-multiple.tsx

@@ -10,6 +10,13 @@ import {
 } from "@repo/elements/choice";
 import { useCallback, useState } from "react";
 
+const labels: Record<string, string> = {
+  "key-points": "Key points",
+  "action-items": "Action items",
+  timeline: "Timeline",
+  sources: "Sources",
+};
+
 const Example = () => {
   const [selected, setSelected] = useState<string[]>([]);
   const handleSubmit = useCallback((value: string | string[]) => {
@@ -20,30 +27,43 @@ const Example = () => {
 
   return (
     <div className="w-full max-w-2xl space-y-3">
-      <Choice multiple onSubmit={handleSubmit} submitOnSelect={false}>
-        <ChoiceQuestion>Which categories should we include?</ChoiceQuestion>
-        <ChoiceOptions>
-          <ChoiceOption description="Incidents and safety trends" value="crime">
-            Crime
-          </ChoiceOption>
-          <ChoiceOption description="Permits and construction" value="permits">
-            Permits
-          </ChoiceOption>
-          <ChoiceOption description="Neighborhood events" value="events">
-            Events
-          </ChoiceOption>
-          <ChoiceOption description="Local headlines" value="news">
-            News
-          </ChoiceOption>
-        </ChoiceOptions>
-        <ChoiceSubmit />
-      </Choice>
       {selected.length > 0 ? (
-        <ChoiceStatus>Selected: {selected.join(", ")}</ChoiceStatus>
-      ) : (
         <ChoiceStatus>
-          Select one or more categories, then confirm.
+          Includes: {selected.map((v) => labels[v]).join(", ")}
         </ChoiceStatus>
+      ) : (
+        <Choice multiple onSubmit={handleSubmit} submitOnSelect={false}>
+          <ChoiceQuestion>
+            What should the summary include?
+          </ChoiceQuestion>
+          <ChoiceOptions>
+            <ChoiceOption
+              description="Main takeaways and findings"
+              value="key-points"
+            >
+              Key points
+            </ChoiceOption>
+            <ChoiceOption
+              description="Next steps and follow-ups"
+              value="action-items"
+            >
+              Action items
+            </ChoiceOption>
+            <ChoiceOption
+              description="Key dates and milestones"
+              value="timeline"
+            >
+              Timeline
+            </ChoiceOption>
+            <ChoiceOption
+              description="References and citations"
+              value="sources"
+            >
+              Sources
+            </ChoiceOption>
+          </ChoiceOptions>
+          <ChoiceSubmit />
+        </Choice>
       )}
     </div>
   );

packages/examples/src/choice.tsx

@@ -9,6 +9,12 @@ import {
 } from "@repo/elements/choice";
 import { useCallback, useState } from "react";
 
+const labels: Record<string, string> = {
+  brief: "Brief",
+  standard: "Standard",
+  detailed: "Detailed",
+};
+
 const Example = () => {
   const [selected, setSelected] = useState<string>();
   const handleSubmit = useCallback((value: string | string[]) => {
@@ -19,27 +25,29 @@ const Example = () => {
 
   return (
     <div className="w-full max-w-2xl space-y-3">
-      <Choice onSubmit={handleSubmit}>
-        <ChoiceQuestion>How should I scope this briefing?</ChoiceQuestion>
-        <ChoiceOptions>
-          <ChoiceOption
-            description="Most recent 24 hours"
-            value="last-24-hours"
-          >
-            Last 24 hours
-          </ChoiceOption>
-          <ChoiceOption description="Past 7 days" value="last-week">
-            Last week
-          </ChoiceOption>
-          <ChoiceOption description="Past 30 days" value="last-month">
-            Last month
-          </ChoiceOption>
-        </ChoiceOptions>
-      </Choice>
       {selected ? (
-        <ChoiceStatus>Selected: {selected}</ChoiceStatus>
+        <ChoiceStatus>Response detail: {labels[selected]}</ChoiceStatus>
       ) : (
-        <ChoiceStatus>Choose one option to continue.</ChoiceStatus>
+        <Choice onSubmit={handleSubmit}>
+          <ChoiceQuestion>How detailed should the response be?</ChoiceQuestion>
+          <ChoiceOptions>
+            <ChoiceOption
+              description="A few sentences at most"
+              value="brief"
+            >
+              Brief
+            </ChoiceOption>
+            <ChoiceOption description="A balanced overview" value="standard">
+              Standard
+            </ChoiceOption>
+            <ChoiceOption
+              description="In-depth with examples"
+              value="detailed"
+            >
+              Detailed
+            </ChoiceOption>
+          </ChoiceOptions>
+        </Choice>
       )}
     </div>
   );