RadioGroup

Vertical (default)

Selected options use OPERATOR's Check icon inside the square indicator. Only one option can be selected in each group.

ALPHABRAVOCHARLIE

Horizontal

A horizontal group that does not fit wraps onto more rows; the arrow keys follow the reading order.

XYZ

Sizes

SMALL

MEDIUM

LARGE

Inside a Field

MODE

ACTIVESTANDBY

SELECT ONE

Props

PROP	TYPE	DEFAULT	REQUIRED
`value`	`string`	—	no
`defaultValue`	`string`	—	no
`onValueChange` (value: string) => void. Called when the operator chooses an option.	`function`	—	no
`disabled`	`boolean`	`false`	no
`required`	`boolean`	`false`	no
`orientation`	`enum` horizontal \| vertical	`"vertical"`	no
`size`	`enum` sm \| md \| lg	`"md"`	no
`name`	`string`	—	no

PROP	TYPE	DEFAULT	REQUIRED
`value`	`string`	—	yes
`disabled`	`boolean`	`false`	no

Accessibility

ARIA radiogroup; arrow keys move selection
Group inherits id, aria-describedby, aria-invalid, and required from <Field>; an invalid group draws every box in the error color.
Option names wrap beside their box, and long identifiers break anywhere.
The box outline is the control outline (--oprt-border-control, 3:1 or more).
In forced-colors (high contrast) mode, keyboard focus draws a 2px outline in the system text color around the box, the selected check mark stays visible, and a disabled option is drawn in the system's gray text color.

Manifest entry

<Field label="CHANNEL">
  <RadioGroup defaultValue="alpha">
    <Radio value="alpha">ALPHA</Radio>
    <Radio value="bravo">BRAVO</Radio>
  </RadioGroup>
</Field>

View agent manifest

{
  "description": "Group of mutually exclusive options. Square outline with the shared OPERATOR Check icon when selected.",
  "props": {
    "value": {
      "type": "string"
    },
    "defaultValue": {
      "type": "string"
    },
    "onValueChange": {
      "type": "function",
      "description": "(value: string) => void. Called when the operator chooses an option."
    },
    "disabled": {
      "type": "boolean",
      "default": false
    },
    "required": {
      "type": "boolean",
      "default": false
    },
    "orientation": {
      "type": "enum",
      "values": [
        "horizontal",
        "vertical"
      ],
      "default": "vertical"
    },
    "size": {
      "type": "enum",
      "values": [
        "sm",
        "md",
        "lg"
      ],
      "default": "md"
    },
    "name": {
      "type": "string"
    }
  },
  "slots": {
    "children": {
      "type": "Radio",
      "required": true
    }
  },
  "composable_with": [
    "Field"
  ],
  "never_inside": [
    "Button",
    "Badge"
  ],
  "example": "<Field label=\"CHANNEL\">\n  <RadioGroup defaultValue=\"alpha\">\n    <Radio value=\"alpha\">ALPHA</Radio>\n    <Radio value=\"bravo\">BRAVO</Radio>\n  </RadioGroup>\n</Field>"
}

<Radio value="alpha">ALPHA</Radio>