> ## 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 – Code

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

<Tabs>
  <Tab title="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.
  </Tab>

  <Tab title="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.

    <ParamField path="label" type="string" required>
      Visible text and accessible name.
    </ParamField>

    <ParamField path="isDisabled" type="boolean" default="false">
      Disables the chip.
    </ParamField>

    <ParamField path="onPress" type="(event: GestureResponderEvent) => void">
      Selection handler, fired on tap.
    </ParamField>

    <ParamField path="testID" type="string">
      Test hook forwarded to the underlying `Pressable`.
    </ParamField>
  </Tab>

  <Tab title="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.

    <ParamField path="onSelect" type="(suggestion: string, index: number) => void" required>
      Fired when a chip is selected.
    </ParamField>

    <ParamField path="suggestions" type="string[]" required>
      Chip labels, in order. Each string is the payload passed to `onSelect`.
    </ParamField>

    <ParamField path="accessibilityLabel" type="string" default="Suggested replies">
      Accessible name for the group.
    </ParamField>

    <ParamField path="analyticsId" type="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`.
    </ParamField>

    <ParamField path="testID" type="string">
      Test hook forwarded to the container.
    </ParamField>
  </Tab>
</Tabs>