Segmented Control

Segmented Control is a linear set of connected controls that lets users select one or more related options, instantly updating the content or view within the same screen.


                                                        
                                                        
                                                            <div>Live Preview</div>
                                                        
                                                            

Props

Name

Description

Type

Default

Values

items Required

Array of items to display in the segmented control

array

 

 

mode

Selection mode - single allows one selection, multiple allows multiple

string

 

 

model-value Required

Current selected value(s) - v-model support

string|array

 

 

full-width

Whether buttons should expand to fill container width

boolean

 

 

aria-label

Accessible label for the segmented control group

string

 

 

Events

Name

Description

Type

update:modelValue

 

{ "names": [ "undefined" ] }

Slots

No available slots