# Approval Card

- Page: https://jiguang132.com/resources/beautiful-ui/docs/approval-card
- Resource: Beautiful UI (https://jiguang132.com/resources/beautiful-ui.md)
- All guides: https://jiguang132.com/resources/beautiful-ui/docs.md

Install: `npx shadcn@latest add https://jiguang132.com/r/beautiful-ui/approval-card.json`


## When to use

Collect a human decision before continuing an agent workflow.

## Key props and data

| Native prop | Meaning |
|---|---|
| `questions` | Use q, type (radio/check) and options. Keep options stable while a decision is being made. |
| `onAnswerChange` | Receives the question index and selected option indices after each option click. |
| `onSubmitted` | Receives Record<number, number[]>; map indices to your original questions before calling a backend. |
| `labels` | Partial localized strings for skip, continue, send, customPlaceholder and sentMessage. |
| `resettable` | Controls whether the sent screen offers another run. |

## Interaction and state checks

Radio advances or submits after 480ms; check waits for Continue/Send. Test the last radio, repeated checkbox edits, reset and editing custom text before the timer fires.

## Integration boundaries

The public submission payload contains option indices only, not the custom text field. Skip may produce missing answers; validate required decisions yourself. Replace the instance with a new key when changing the questionnaire.

The runnable usage and source reference below preserve the native API. These practical guides do not claim a full translation of upstream prose.


## Runnable usage

Install a complete example below first, then import its installed entry. Parameterized example source, shared helpers, native components and CSS are included; no manual relative-import edits are required.

```tsx
import Demo from '@/components/beautiful-ui/examples/presets/approval-card-single-choice';
import '@/styles/beautiful-ui.css';
export default function Example() { return <Demo />; }

```


## Preview states

Default, Single choice, Multiple choice

Demo state and mock data do not provide a backend service. Inspect the component props before wiring real data.

Human-in-the-loop questions the agent asks before acting.



## Complete example installation

These are runnable native states and parameterized usage scenarios, not additional components. Each bundle includes its source closure, helpers, pinned dependencies, independent CSS and licenses. Scenario names are not new native component props; consult the source API below.

### Default

```bash
npx shadcn@latest add https://jiguang132.com/r/beautiful-ui/examples/approval-card/approval-card-default.json
```

Default import: `@/components/beautiful-ui/examples/presets/approval-card-default`

Dependencies: `class-variance-authority@0.7.1`, `clsx@2.1.1`, `tailwind-merge@3.6.0`, `shadow-plugin@2.1.1`

### Single choice

```bash
npx shadcn@latest add https://jiguang132.com/r/beautiful-ui/examples/approval-card/approval-card-single-choice.json
```

Default import: `@/components/beautiful-ui/examples/presets/approval-card-single-choice`

Dependencies: `class-variance-authority@0.7.1`, `clsx@2.1.1`, `tailwind-merge@3.6.0`, `shadow-plugin@2.1.1`

### Multiple choice

```bash
npx shadcn@latest add https://jiguang132.com/r/beautiful-ui/examples/approval-card/approval-card-multiple-choice.json
```

Default import: `@/components/beautiful-ui/examples/presets/approval-card-multiple-choice`

Dependencies: `class-variance-authority@0.7.1`, `clsx@2.1.1`, `tailwind-merge@3.6.0`, `shadow-plugin@2.1.1`

Initialize Tailwind CSS v4, import beautiful-ui.css once and synchronize theme with the host html dark class. Examples read html lang for Chinese/English and do not supply backend, authentication or recording. Network/clipboard availability still depends on the browser.


## Source-backed parameter reference

Implementation signatures and types are generated from the pinned local source. Optional props, native inherited types, union branches and never exclusions are preserved. A forwardRef implementation's ref is a React reference, not an additional business prop.


```ts
ApprovalCard({
  questions = QUESTIONS,
  labels,
  onSubmitted,
  onAnswerChange,
  resettable = true,
}: {
  questions?: ApprovalQuestion[];
  labels?: Partial<ApprovalLabels>;
  onSubmitted?: (answers: Record<number, number[]>) => void;
  onAnswerChange?: (questionIndex: number, answer: number[]) => void;
  resettable?: boolean;
  variant?: string;
} = {})
```



```ts
export type ApprovalQuestion = {
  q: string;
  type: "radio" | "check";
  options: string[];
};

export type ApprovalLabels = {
  skip: string;
  continue: string;
  send: string;
  customPlaceholder: string;
  sentMessage: string;
};
```


### Destructuring defaults in source

Only defaults written directly in parameter/props destructuring are listed. Conditional expressions, runtime theme and computed values require source inspection; this is not an exhaustive behavior-default list.


```ts
// ApprovalCard
questions = QUESTIONS

// ApprovalCard
resettable = true
```


### Native and external types

External types remain defined by React or native dependencies, not manually expanded into guessed props. The installed version's TypeScript definitions are authoritative.


```ts
Partial<ApprovalLabels>
Record<number, number[]>
```

---

Index of all JGuang resources: https://jiguang132.com/llms.txt