SegmentedControl

SegmentedControl delegates selection, roving focus, and keyboard behavior to Reka UI. Single and multiple modes retain selection; action mode emits commands without toggle state.

Selection mode

<script setup lang="ts">
import { ref } from 'vue'
import { SegmentedControlItem, SegmentedControlRoot } from '@open-pencil/vue'

const alignment = ref('left')
</script>

<template>
  <SegmentedControlRoot v-model="alignment" aria-label="Alignment">
    <SegmentedControlItem value="left">Left</SegmentedControlItem>
    <SegmentedControlItem value="center">Center</SegmentedControlItem>
    <SegmentedControlItem value="right">Right</SegmentedControlItem>
  </SegmentedControlRoot>
</template>

Action mode

Use mode="action" for grouped commands such as flip and rotate. Arrow keys move focus, while Space or Enter emits action(value) without leaving a selected segment.

The complete state matrix is shown in the PropertySection demo.

Generated API reference

SegmentedControlRoot

Generated from packages/vue/src/primitives/SegmentedControl/SegmentedControlRoot.vue

Props

Prop	Default	Type
mode Selection behavior or stateless action behavior.	—	SegmentedControlMode | undefined
modelValue Controlled selected value or values.	—	string | string[] | undefined
orientation Arrow-key navigation axis.	"horizontal"	SegmentedControlOrientation | undefined
disabled Disable every item.	—	boolean | undefined
required Require a value in single-selection mode.	false	boolean | undefined
rovingFocus Enable arrow-key roving focus.	true	boolean | undefined
loop Wrap keyboard focus at the first and last item.	true	boolean | undefined

Events

Event	Payload	Description
update:modelValue	[value: string | string[] | undefined]
action	[value: string]

Slots

Slot	Props	Description
default	{ mode: SegmentedControlMode; modelValue: string | string[] | undefined; }

SegmentedControlItem

Generated from packages/vue/src/primitives/SegmentedControl/SegmentedControlItem.vue

Props

Prop	Default	Type
value* Stable selection or action identifier.	—	string
disabled Disable this item.	—	boolean | undefined
as Element or component rendered by this item.	"button"	string | Component | undefined
asChild Merge item behavior into the single child element.	false	boolean | undefined

Slots

Slot	Props	Description
default	SegmentedControlItemSlotProps