Select component

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

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

Wire example

{
  "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, 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.

Overview

Get started

Messages

Message components

Conversations

Webhooks & events

Reference

Select component

Abstract

Preview

Wire example

Schema table

Examples per state

Constraints

iOS rendering notes

See also

​Abstract

​Preview

​Wire example

​Schema table

​Examples per state

​Constraints

​iOS rendering notes

​See also

Abstract

Preview

Wire example

Schema table

Examples per state

Constraints

iOS rendering notes

See also