
## Direction

```vue
<template>
  <el-segmented v-model="value" :options="options" direction="vertical" />
</template>

Disabled

<template>
  <el-segmented v-model="value" :options="options" disabled />
</template>

Block

<template>
  <el-segmented v-model="value" :options="options" block />
</template>

Custom Content

<template>
  <el-segmented v-model="value" :options="options">
    <template #default="{ item }">
      <div class="flex items-center gap-2">
        <el-icon><component :is="item.icon" /></el-icon>
        <span>{{ item.label }}</span>
      </div>
    </template>
  </el-segmented>
</template>

<script setup>
import { ref } from 'vue'

const value = ref('list')
const options = [
  { label: 'List', value: 'list', icon: 'List' },
  { label: 'Grid', value: 'grid', icon: 'Grid' }
]
</script>

Custom Props

<template>
  <el-segmented
    v-model="value"
    :options="options"
    :props="{ label: 'name', value: 'id' }"
  />
</template>

<script setup>
import { ref } from 'vue'

const value = ref(1)
const options = [
  { id: 1, name: 'Option 1' },
  { id: 2, name: 'Option 2' }
]
</script>

API Reference

Attributes

Name	Description	Type	Default
model-value / v-model	Binding value	`string \| number \| boolean`	—
options	Options data	`Option[]`	`[]`
props	Configuration options	`object`	—
size	Size	`'' \| 'large' \| 'default' \| 'small'`	`''`
block	Fit parent width	`boolean`	`false`
disabled	Disabled	`boolean`	`false`
direction	Display direction	`'horizontal' \| 'vertical'`	`'horizontal'`

Props Configuration

Name	Description	Type	Default
value	Value key	`string`	`'value'`
label	Label key	`string`	`'label'`
disabled	Disabled key	`string`	`'disabled'`

Events

Name	Description	Type
change	Value changes	`(val: any) => void`

Slots

Name	Description	Type
default	Option renderer	`{ item: Option }`

Best Practices

Use block for full-width layouts
Use direction="vertical" for limited horizontal space
Use custom content for rich option displays

el-segmented

Segmented Component

When to Use

Basic Usage