SegmentedControl ⚠️ Experimental

The SegmentedControl component can be used imported from:

Playground

Parameters

Events

This component has events. Check the documentation about how to use the events.

Name	Payload	Description
@update:modelValue	string	Returns the new value of the model
@restarted	void	Emitted on value reset
@blur	void	Emitted on blur
@validated	boolean	Emitted when the validation status changes

Slots

This component has slots. Check the documentation about how to use the slots.

Name	Tags	Description
default	span

Parameters use

Check the documentation about how to use the parameters.

modelValue

Attention!

If you hardcode this value, it will not be reactive and the selection won't change. Use a variable instead and, ideally, a closed loop.

The model attribute is used to model selected value.

Option 1Option 2Option 3

options

The options parameter is used to set the options of the segmented control. Each option object should contain the text and value keys, also the disabled key is optional.

We can use <option> tags to define the values of options

Option 1Option 2Option 3

name

The name parameter is used to set the name of the segmented control.

Flags

disabled

The disabled parameter is used to block the interaction with the component.

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

CodeSandbox example

Sorry, not available yet ☹️