# OperationList

Source: /tuil/docs/reference/components/workflow/operation-list
Locale: en

OperationList component API, behavior, and executable example.





{/* Generated by tooling/docs/generate-reference.ts. */}

<PublishedStory storyId="component-acceptance" variant="Workflow" />

## API and events [#api-and-events]

Bind observable workflow and operation snapshots to guided terminal flows, progress, errors, cancellation, splash state, and contextual help.

```tsx
export function OperationList({
  id = "operations",
  operations,
  expandable = false,
  showDuration = false,
  showAttempts = false,
  showProgress = true,
  now: fixedNow,
  slots,
  slotProps,
}: OperationListProps): ReactNode;
```

### Props, functions, and events [#props-functions-and-events]

| Member         | Type                                                                                                                                                                                    | Required | Description                                                                                                                                                                                                                       | Related types                                                                                                                                                                                |
| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `id`           | `string \| undefined`                                                                                                                                                                   | No       | The `id` member uses the `string \| undefined` contract.                                                                                                                                                                          | —                                                                                                                                                                                            |
| `operations`   | `readonly OperationSnapshot<unknown>[]`                                                                                                                                                 | Yes      | The `operations` member uses the `readonly OperationSnapshot<unknown>[]` contract.                                                                                                                                                | [`OperationSnapshot`](/tuil/docs/reference/packages/operations/api/operation-snapshot)                                                                                                            |
| `expandable`   | `boolean \| undefined`                                                                                                                                                                  | No       | The `expandable` member uses the `boolean \| undefined` contract.                                                                                                                                                                 | —                                                                                                                                                                                            |
| `showDuration` | `boolean \| undefined`                                                                                                                                                                  | No       | The `showDuration` member uses the `boolean \| undefined` contract.                                                                                                                                                               | —                                                                                                                                                                                            |
| `showAttempts` | `boolean \| undefined`                                                                                                                                                                  | No       | The `showAttempts` member uses the `boolean \| undefined` contract.                                                                                                                                                               | —                                                                                                                                                                                            |
| `showProgress` | `boolean \| undefined`                                                                                                                                                                  | No       | The `showProgress` member uses the `boolean \| undefined` contract.                                                                                                                                                               | —                                                                                                                                                                                            |
| `now`          | `number \| undefined`                                                                                                                                                                   | No       | The `now` member uses the `number \| undefined` contract.                                                                                                                                                                         | —                                                                                                                                                                                            |
| `slots`        | `Partial<SlotComponents<&#123; root: import("ink").BoxProps; item: import("ink").BoxProps; title: import("ink").TextProps; metadata: import("ink").TextProps; &#125;>> \| undefined`    | No       | The `slots` member uses the `Partial<SlotComponents<&#123; root: import("ink").BoxProps; item: import("ink").BoxProps; title: import("ink").TextProps; metadata: import("ink").TextProps; &#125;>> \| undefined` contract.        | [`BoxProps`](/tuil/docs/reference/packages/ink/api/box-props), [`SlotComponents`](/tuil/docs/reference/packages/theme/api/slot-components), [`TextProps`](/tuil/docs/reference/packages/ink/api/text-props) |
| `slotProps`    | `Partial<SlotProps<&#123; root: import("ink").BoxProps; item: import("ink").BoxProps; title: import("ink").TextProps; metadata: import("ink").TextProps; &#125;, object>> \| undefined` | No       | The `slotProps` member uses the `Partial<SlotProps<&#123; root: import("ink").BoxProps; item: import("ink").BoxProps; title: import("ink").TextProps; metadata: import("ink").TextProps; &#125;, object>> \| undefined` contract. | [`BoxProps`](/tuil/docs/reference/packages/ink/api/box-props), [`SlotProps`](/tuil/docs/reference/packages/theme/api/slot-props), [`TextProps`](/tuil/docs/reference/packages/ink/api/text-props)           |
| `unstyled`     | `boolean \| undefined`                                                                                                                                                                  | No       | The `unstyled` member uses the `boolean \| undefined` contract.                                                                                                                                                                   | —                                                                                                                                                                                            |
| `variant`      | `string \| undefined`                                                                                                                                                                   | No       | The `variant` member uses the `string \| undefined` contract.                                                                                                                                                                     | —                                                                                                                                                                                            |
| `size`         | `"sm" \| "md" \| "lg" \| undefined`                                                                                                                                                     | No       | The `size` member uses the `"sm" \| "md" \| "lg" \| undefined` contract.                                                                                                                                                          | —                                                                                                                                                                                            |

The runner emits the complete `workflow:*` lifecycle; operation components reflect operation snapshots and callbacks.

Callback props run after the documented input is accepted. Callbacks are not cancellable unless their return type or description states otherwise.

## Interaction and capabilities [#interaction-and-capabilities]

Controls call the runner's next, back, skip, retry, cancel, and rollback operations with transition locking.

The published manifest records keyboard, focus, pointer, theme, terminal, semantic, event, and dependency requirements.

## Complete import [#complete-import]

```tsx
import { OperationList } from "@/components/tuil/workflows/workflow";
```