el-segmented

Render single-option selection UI with the el-segmented control.

21|2|Updated Mar 13, 2026
One-click install
npx skills add https://github.com/jiaiyan/element-plus-skills --skill el-segmented
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: el-segmented
Source: https://github.com/jiaiyan/element-plus-skills/tree/main/components/el-segmented
Command: npx skills add https://github.com/jiaiyan/element-plus-skills --skill el-segmented

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Segmented controls simplify single-option selection when space is limited and you want clear visual grouping.

Core Features & Use Cases

  • Enables radio-style selections with a compact UI
  • Supports vertical and horizontal layouts, custom content, and dynamic options
  • Useful for toggling views or selecting among a finite set of options in forms or dashboards

Quick Start

Create an el-segmented with an options array to present choices to users.

Frequently Asked Questions about el-segmented

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a single-option segmented control in Vue using Element Plus?

Create a single-option segmented control in Vue using Element Plus by binding an options array to the el-segmented component and utilizing v-model to manage the selected value dynamically.

What is the best way to implement a compact single-select UI for Vue forms and dashboards?

A compact single-select UI for Vue forms is implemented using a segmented control, providing radio-style visual grouping to simplify single-option selection where space is limited.

Can I display segmented controls vertically in Element Plus?

Yes, you can display segmented controls vertically in Element Plus by configuring the direction prop, which supports both vertical and horizontal layouts alongside block and size adjustments.

Does the Element Plus segmented control support custom content and dynamic options?

The Element Plus segmented control supports custom content and dynamic options through the options prop, allowing you to render custom elements within the single-select UI for toolbars and dashboards.

How do I detect option changes in an Element Plus segmented control?

Detect option changes in an Element Plus segmented control by listening to the emitted change events, which trigger alongside the v-model binding updates when a user selects a new option.

When should I use a segmented control instead of a standard radio group in Vue?

Use a segmented control instead of a standard radio group in Vue when you need a compact, visually grouped single-option selection UI for toggling views or selecting from a finite set of options.