# A2uiChoicePickerComponent

Package: `@threadplane/chat` · 0.3.4

Reference: /docs/api/chat/A2uiChoicePickerComponent

```typescript
import { A2uiChoicePickerComponent } from '@threadplane/chat';
```

## A2uiChoicePickerComponent

Renders single or multiple A2UI choices as chips or selection rows, with optional filtering.

```typescript
export declare class A2uiChoicePickerComponent  {
  readonly _bindings: import("@angular/core").InputSignal<Record<string, string>>;
  readonly bindings: import("@angular/core").InputSignal<Record<string, string>>;
  readonly childKeys: import("@angular/core").InputSignal<string[]>;
  readonly displayStyle: import("@angular/core").InputSignal<"checkbox" | "chips">;
  readonly errorText: import("@angular/core").InputSignal<string>;
  readonly filterable: import("@angular/core").InputSignal<boolean>;
  readonly label: import("@angular/core").InputSignal<string>;
  readonly loading: import("@angular/core").InputSignal<boolean>;
  onCheckChange(value: string, event: Event): void;
  onChipToggle(value: string): void;
  onFilterInput(event: Event): void;
  readonly options: import("@angular/core").InputSignal<ResolvedOption[]>;
  readonly spec: import("@angular/core").InputSignal<Spec | undefined>;
  readonly value: import("@angular/core").InputSignal<string | string[] | undefined>;
  readonly variant: import("@angular/core").InputSignal<"mutuallyExclusive" | "multipleSelection">;
}
```

**Angular selector:** `a2ui-choice-picker`

- Input `_bindings`: `Record<string, string>`

- Input `bindings`: `Record<string, string>`

- Input `childKeys`: `string[]`

- Input `displayStyle`: `"checkbox" | "chips"`

- Input `errorText`: `string`

- Input `filterable`: `boolean`

- Input `label`: `string`

- Input `loading`: `boolean`

- Input `options`: `ResolvedOption[]`

- Input `spec`: `Spec | undefined`

- Input `value`: `string | string[] | undefined`

- Input `variant`: `"mutuallyExclusive" | "multipleSelection"`

### _bindings

```typescript
readonly _bindings: import("@angular/core").InputSignal<Record<string, string>>;
```

### bindings

```typescript
readonly bindings: import("@angular/core").InputSignal<Record<string, string>>;
```

### childKeys

```typescript
readonly childKeys: import("@angular/core").InputSignal<string[]>;
```

### displayStyle

v0.9 prop: render as 'checkbox' rows (default) or 'chips'.

```typescript
readonly displayStyle: import("@angular/core").InputSignal<"checkbox" | "chips">;
```

### errorText

Live validation message written by the surface's check gate
(bound to /_a2uiChecks/<id>); empty when valid.

```typescript
readonly errorText: import("@angular/core").InputSignal<string>;
```

### filterable

v0.9 prop: when true, show a client-side option filter input.

```typescript
readonly filterable: import("@angular/core").InputSignal<boolean>;
```

### label

```typescript
readonly label: import("@angular/core").InputSignal<string>;
```

### loading

```typescript
readonly loading: import("@angular/core").InputSignal<boolean>;
```

### onCheckChange · overload 1

```typescript
onCheckChange(value: string, event: Event): void;
```

### onChipToggle · overload 1

```typescript
onChipToggle(value: string): void;
```

### onFilterInput · overload 1

```typescript
onFilterInput(event: Event): void;
```

### options

Resolved options with plain string labels (surface-to-spec resolves DynamicString).

```typescript
readonly options: import("@angular/core").InputSignal<ResolvedOption[]>;
```

### spec

```typescript
readonly spec: import("@angular/core").InputSignal<Spec | undefined>;
```

### value

v0.9 prop: current selection (string[]). Normalized in `valueArray`
because LLMs sometimes seed the data model with a scalar (e.g. `"5"`)
instead of an array (`["5"]`); we coerce so .includes() works either way.

```typescript
readonly value: import("@angular/core").InputSignal<string | string[] | undefined>;
```

### variant

v0.9 prop: 'mutuallyExclusive' (single-select, default) or 'multipleSelection'.

```typescript
readonly variant: import("@angular/core").InputSignal<"mutuallyExclusive" | "multipleSelection">;
```