Skip to content 
Option 1Option 2Option 3Option 4
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 |
|---|---|---|
ngModelChange | 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 |
Parameters use
Check the documentation about how to use the parameters.
ngModel
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.
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
We can use slots to define the content of the cards with the option-<value> slot.
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 ☹️