Segmented Control Data-Driven

Set the data property with option objects; set value for the initial option.

Data driven segmented control

Code

The following example assumes that you have imported the component and set up the theme.

<div class="segmented-container-container">
  <label for="vertical-segmented-control">Data driven segmented control</label>

  <sv-segmented-control id="vertical-segmented-control" orientation="vertical"></sv-segmented-control>
</div>

<script type="module">
  /** @type {SegmentedControl} */
  const toggleButton = document.querySelector("#vertical-segmented-control");

  if (toggleButton) {
    toggleButton.data = [
      { value: "1", label: "First option" },
      { value: "2", label: "Second option" },
      { value: "3", label: "Disabled option", disabled: true },
      { value: "4", label: "Last option" },
    ];

    toggleButton.value = "3";
  }
</script>

8 collapsed lines
<style>
  .segmented-container-container {
    display: flex;
    flex-direction: column;
    gap: 1em;
    align-items: center;
  }
</style>