Segmented

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

Basic Usage

Set v-model to the option value is selected.

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 default slot to render custom content.

API

Attributes

Name	Description	Type	Default
model-value / v-model	binding value	`string` / `number`	—
options	data of the options	`array`	[]
size	size of component	`enum`	''
block	fit width of parent content	`boolean`	—
disabled	whether segmented is disabled	`boolean`	false
validate-event	whether to trigger form validation	`boolean`	true
name	native `name` attribute	`string`	—
id	native `id` attribute	`string`	—
aria-label a11y	native `aria-label` attribute	`string`	—

Events

Name	Description	Type
change	triggers when the selected value changes, the param is current selected value	`Function`

Slots

Name	Description
default	option renderer

Type Declarations

Show declarations

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