Segmented Control

A short option list displayed as inline segments. Stores a .string value.

Type

"segmentedControl"

Relevant Fields

Inherits all Control Definition. Key fields:

Field Type Default Description
options string[] required Segment labels
optionIcons string[] — SF Symbols parallel to options
style string "default" "default" (system) or "pills" (capsule buttons)
tint string "#667eea" Accent for pills style
defaultValue string — Initially selected option
haptic string "selection" Default haptic on change

Styles

"default"

Standard iOS segmented picker. System-styled.

"pills"

Horizontal row of capsule-shaped buttons. Selected pill gets tinted background.

Examples

HVAC mode selector

{
  "type": "segmentedControl",
  "id": "hvac-mode",
  "position": [1, 2],
  "span": [1, 2],
  "options": ["Heat", "Cool", "Auto", "Off"],
  "defaultValue": "Auto",
  "action": { "method": "meshsocket", "mode": "request", "event": "route_msg", "payload": { "target_id": "ecobee", "type": "set_mode", "payload": { "mode": "{{value}}" } } }
}

Fan speed with icons

{
  "type": "segmentedControl",
  "id": "fan-speed",
  "position": [0, 1],
  "span": [1, 3],
  "options": ["Low", "Med", "High"],
  "optionIcons": ["wind", "wind", "wind"],
  "style": "pills",
  "defaultValue": "Med"
}

Notes

  • Best for 2-5 options. For longer lists, use Picker instead.
  • Value is the string text of the selected option.