Segmented ​

Display multiple options and allow users to select a single option.

Basic Usage ​

Set v-model to the option value is selected.

Direction Usage 2.8.7 ​

Set vertical to change direction.



Disabled ​

Set disabled of segmented or option to true to disable it.

Block ​

Set block to true to fit the width of parent element.

Custom Content ​

Set default slot to render custom content.

Custom Style ​

Set custom styles using CSS varibles.

API ​

Attributes ​

NameDescriptionTypeDefault
model-value / v-modelbinding valuestring / number / boolean—
optionsdata of the optionsarray[]
sizesize of componentenum''
blockfit width of parent contentboolean—
disabledwhether segmented is disabledbooleanfalse
validate-eventwhether to trigger form validationbooleantrue
namenative name attributestring—
idnative id attributestring—
aria-label a11ynative aria-label attributestring—
direction 2.8.7display directionenumhorizontal

Events ​

NameDescriptionType
changetriggers when the selected value changes, the param is current selected valueFunction

Slots ​

NameDescriptionType
defaultoption rendererobject

Type Declarations ​

Show declarations
ts
type Option =
  | {
      label: string
      value: string | number | boolean
      disabled?: boolean
      [key: string]: any
    }
  | string
  | number
  | boolean

Source ​

Component • Style • Docs

Contributors ​