Segmented

Mutually exclusive option switching, for view switchers.

Basic usage

Basic

<script setup>
import { ref } from 'vue'
const view = ref('List')
</script>

<template>
  <LhSegmented v-model="view" :options="['List', 'Card', 'Table']" />
</template>

<script>
export default {
  data() {
    return { view: 'List' }
  },
}
</script>

<template>
  <LhSegmented v-model="view" :options="['List', 'Card', 'Table']" />
</template>

Disabled and block

disabled disables the whole selector; item-level disabled inside options disables a single segment; block stretches the selector to full width.

Disabled & block

<script setup>
import { ref } from 'vue'
const viewDisabled = ref('One')
const viewBlock = ref('Day')
</script>

<template>
  <LhSegmented
    v-model="viewDisabled"
    disabled
    :options="['One', 'Two', 'Three']"
  />
  <LhSegmented
    v-model="viewBlock"
    block
    :options="['Day', 'Week', { label: 'Month', value: 'month', disabled: true }]"
  />
</template>

<script>
export default {
  data() {
    return { viewDisabled: 'One', viewBlock: 'Day' }
  },
}
</script>

<template>
  <LhSegmented
    v-model="viewDisabled"
    disabled
    :options="['One', 'Two', 'Three']"
  />
  <LhSegmented
    v-model="viewBlock"
    block
    :options="['Day', 'Week', { label: 'Month', value: 'month', disabled: true }]"
  />
</template>

API

LhSegmented Props

Attribute	Description	Type	Default
modelValue	Current value (controlled v-model)	string | number	—
options	Options (string shorthand or objects)	[LhSegmentedInput](#type-LhSegmentedInput)[]	—
disabled	Disable the whole group	boolean	false
block	Stretch to fill the container	boolean	false
sx	Quick layout props	LhSxProps	—

LhSegmented Events

Event	Description	Callback
update:modelValue	Emitted when the selection changes (use with v-model)	(value: string | number) => void
change	Emitted when the selection changes (by click or arrow keys)	(value: string | number) => void

Accessibility

• role="radiogroup" + role="radio" + aria-checked
• Roving tabindex: arrow keys move (skipping disabled options, looping at edges)

Type Definitions

The TypeScript type structures exported by this component (auto-extracted from packages/components/segmented/src/types.ts and @lh-ui/share/core/* sources; click each entry to expand; see the Props table above for attribute descriptions):

LhSegmentedProps

export interface LhSegmentedProps {
  modelValue?: LhSegmentedValue
  options: LhSegmentedInput[]
  disabled?: boolean
  block?: boolean
  sx?: LhSxProps
}

LhSegmentedValue _{(from @lh-ui/share/core/segmented)}

export type LhSegmentedValue = string | number

LhSegmentedInput _{(from @lh-ui/share/core/segmented)}

export type LhSegmentedInput = LhSegmentedValue | LhSegmentedOption

LhSegmentedOption _{(from @lh-ui/share/core/segmented)}

export interface LhSegmentedOption {
  label: string
  value: LhSegmentedValue
  disabled?: boolean
}

const viewDisabled = ref('One') const viewBlock = ref('Day')