> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Suggestion - React Native

> Suggestion and SuggestionList provide selectable follow-up prompts beneath an agent response.

> [!NOTE]
>
> For development, import `Suggestion` from
> `@servicetitan/anvil2-rn`. For design, find it in the
> [Mobile Agentic Component Library file](https://www.figma.com/design/gjGWnAOnI1kukfzjsUQ6dP/Mobile-Agentic-Component-Library).

**Implementation**

```tsx theme={null}
import { Suggestion } from "@servicetitan/anvil2-rn";

function App() {
  return <Suggestion label="What can you help me with?" />;
}
```

## Common Examples

To use a single `Suggestion`, pass a required `label` and handle selection with `onPress`. Supply the label already localized; the component renders it verbatim.

```tsx theme={null}
import { Suggestion } from "@servicetitan/anvil2-rn";

function ExampleComponent() {
  return (
    <Suggestion
      label="Show overdue invoices"
      onPress={() => sendPrompt("Show overdue invoices")}
    />
  );
}
```

### Suggestion list

Use `SuggestionList` for a wrapping group of chips. Each string in `suggestions` becomes a `Suggestion`. `onSelect` receives the selected string and index. The list does not enforce content limits. Keep the set to three suggestions of about 40 characters each.

```tsx theme={null}
import { SuggestionList } from "@servicetitan/anvil2-rn";

function App() {
  return (
    <SuggestionList
      suggestions={[
        "What can you help me with?",
        "Order more",
        "Show recent updates",
      ]}
      onSelect={(suggestion) => sendPrompt(suggestion)}
    />
  );
}
```

## Accessibility

* A `Suggestion` is a button named by `label`.
* `SuggestionList` exposes the chips as one labelled group. Override `accessibilityLabel` (default `"Suggested replies"`) for localized copy.

**Suggestion Props**

```tsx theme={null}
<Suggestion label="Show overdue invoices" onPress={() => {}} />
```

## `Suggestion` Props

The `Suggestion` accepts the following props. It does not forward remaining React Native `Pressable` props.

**label** `string` *required*

Visible text and accessible name.

**isDisabled** `boolean` (default: false)

Disables the chip.

**onPress** `(event: GestureResponderEvent) =\> void`

Selection handler, fired on tap.

**testID** `string`

Test hook forwarded to the underlying `Pressable`.

**SuggestionList Props**

```tsx theme={null}
<SuggestionList
  suggestions={["What can you help me with?", "Order more"]}
  onSelect={(suggestion, index) => {}}
/>
```

## `SuggestionList` Props

The `SuggestionList` accepts the following props. It does not forward remaining React Native `View` props.

**onSelect** `(suggestion: string, index: number) =\> void` *required*

Fired when a chip is selected.

**suggestions** `string[]` *required*

Chip labels, in order. Each string is the payload passed to `onSelect`.

**accessibilityLabel** `string` (default: Suggested replies)

Accessible name for the group.

**analyticsId** `string`

Opt-in telemetry id. When set under `Anvil2RNTelemetryProvider`,
selecting a chip emits a `select` event with `meta.index` (position
only, never the text) before `onSelect`.

**testID** `string`

Test hook forwarded to the container.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.