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

# Select component

> Open a native single-select sheet from a collapsed transcript row.

## Abstract

Use `select` when the user should choose one item from a longer, optionally sectioned list. The transcript shows `button_label`; tapping it opens the native picker sheet.

## Preview

<Note>
  TODO: add the real iOS lane capture from `/tmp/relay-component-select.png`. This slot intentionally has no fabricated screenshot.
</Note>

## Wire example

```json theme={null}
{
  "send": {
    "conversation_id": "cnv_01JZC7K4RQ",
    "parts": [{
      "type": "data",
      "data": {
        "kind": "select",
        "prompt": "Pick a slot",
        "button_label": "View slots",
        "sections": [{
          "title": "Tuesday",
          "options": [{ "id": "tue-2pm", "label": "2:00pm", "description": "45 min" }]
        }]
      }
    }]
  },
  "stored_part": {
    "part_index": 0,
    "type": "data",
    "data": {
      "kind": "select",
      "prompt": "Pick a slot",
      "button_label": "View slots",
      "sections": [{
        "title": "Tuesday",
        "options": [{ "id": "tue-2pm", "label": "2:00pm", "description": "45 min" }]
      }],
      "fallback": "Pick a slot\n1. 2:00pm"
    }
  },
  "tap_result": {
    "parts": [{
      "type": "data",
      "data": {
        "origin": {
          "kind": "data_action",
          "message_id": "msg_01JZM5Q9VN",
          "part_index": 0,
          "option_id": "tue-2pm",
          "source_kind": "select"
        },
        "option_id": "tue-2pm",
        "label": "2:00pm"
      }
    }],
    "fallback_text": "2:00pm"
  }
}
```

## Schema table

| Field                | Type       | Required | Notes                          |
| -------------------- | ---------- | -------- | ------------------------------ |
| `kind`               | `"select"` | Yes      | Selects this renderer          |
| `prompt`             | string     | No       | Up to 1,024 characters         |
| `button_label`       | string     | Yes      | 1–20 characters                |
| `sections`           | section\[] | Yes      | 1–5 sections, 12 options total |
| `sections[].title`   | string     | No       | Up to 24 characters            |
| `sections[].options` | option\[]  | Yes      | Non-empty within each section  |
| `fallback`           | string     | No       | Synthesized when omitted       |

Select options use all [common option fields](/components#common-option-fields), including the optional 72-character description.

## Examples per state

| State                    | Repository artifact                          |
| ------------------------ | -------------------------------------------- |
| Send request             | `examples/components/select-send.json`       |
| Canonical stored message | `examples/components/select-stored.json`     |
| Tap-result user message  | `examples/components/select-tap-result.json` |

## Constraints

| Violation                                | Result                |
| ---------------------------------------- | --------------------- |
| No sections or more than 5               | `422 invalid_request` |
| Empty section option list                | `422 invalid_request` |
| More than 12 options across all sections | `422 invalid_request` |
| `button_label` over 20 characters        | `422 invalid_request` |
| Section title over 24 characters         | `422 invalid_request` |
| Description over 72 characters           | `422 invalid_request` |
| Message targets a group conversation     | `422 invalid_request` |

## iOS rendering notes

Render `ComponentSelect` as one collapsed row at message width. Present a native single-select `.sheet` on tap. After a successful choice, show the selected label, disable other choices, and preserve the selection in the transcript.

## See also

* [Message components](/components)
* [Buttons](/components/buttons)
* [Sending messages](/guides/sending-messages)