El Segmented

Segmented Component

Segmented displays multiple options and allows users to select a single option.

When to Use

• Radio-style selections
• Tab-like controls
• Option switches
• View mode toggles

Basic Usage

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

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

const value = ref('Mon')
const options = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
</script>

Direction

<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

Props Configuration

Events

Slots

Best Practices

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