Skip to content
Latch

Component

ChoiceList

A decision is a list with one selected, not a wall of buttons.

Radio rows with a label and one line of detail. Arrow keys move the selection.

Which machine should the request cover?

Do

  • Use it when the options need a line of explanation.
  • Keep the current choice visible.
  • Name the decision in the label.

Don't

  • Use it for a yes or no that is really a confirm.
  • Give every option a primary button.
  • Hide the description the choice depends on.

Props

PropTypeDescription
labelstringWhat the person is choosing.
optionsChoice[]Value, label, and an optional description.
valuestringThe selected value.
onChange(value) => voidFires when the selection changes.

A2UI message

v0.9.1 envelope. catalogId is latch://catalog/v1. The preview under the message is rendered by the adapter, not hand-built.

JSON

[
  {
    "version": "v0.9.1",
    "createSurface": {
      "surfaceId": "laptop",
      "catalogId": "latch://catalog/v1"
    }
  },
  {
    "version": "v0.9.1",
    "updateComponents": {
      "surfaceId": "laptop",
      "components": [
        {
          "id": "root",
          "component": "ChoiceList",
          "label": "Which machine should the request cover?",
          "value": "standard",
          "options": [
            {
              "value": "standard",
              "label": "Standard laptop",
              "description": "Enough for documents and calls."
            },
            {
              "value": "design",
              "label": "Design laptop",
              "description": "More memory for large files."
            }
          ],
          "state": "idle"
        }
      ]
    }
  }
]

Which machine should the request cover?