Segmented Control Dynamic Layout

Use a media query on ::part(container) to change orientation.

Note

When orientation is handled in CSS, do not set the "orientation" attribute, it will override the styles.

Choose a device

Code

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

<div class="segmented-control-container">
  <label for="device-control">Choose a device</label>

  <sv-segmented-control id="device-control" class="segmented-control" value="pc">
    <button type="button" class="segmented-control-button" value="laptop">
3 collapsed lines
      <svg class="button-icon" aria-hidden="true" viewBox="0 0 24 24">
        <path d="M20 18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2zM4 6h16v10H4z"></path>
      </svg>
      Laptop
    </button>

    <button type="button" class="segmented-control-button" value="pc">
5 collapsed lines
      <svg class="button-icon" aria-hidden="true" viewBox="0 0 24 24">
        <path
          d="M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.1-.9-2-2-2m0 14H3V5h18z"
        ></path>
      </svg>
      PC
    </button>

    <button type="button" class="segmented-control-button" value="phone">
5 collapsed lines
      <svg class="button-icon" aria-hidden="true" viewBox="0 0 24 24">
        <path
          d="M16 1H8C6.34 1 5 2.34 5 4v16c0 1.66 1.34 3 3 3h8c1.66 0 3-1.34 3-3V4c0-1.66-1.34-3-3-3m-2 20h-4v-1h4zm3.25-3H6.75V4h10.5z"
        ></path>
      </svg>
      Phone
    </button>
  </sv-segmented-control>
</div>

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

    .segmented-control-button {
      display: flex;
      flex-direction: column;
      gap: 0.5em;
      align-items: center;
      min-inline-size: 8em;

      .button-icon {
        block-size: 40px;
        padding-block: 0.5em;
        fill: currentcolor;
      }
    }

    /* Vertically stack buttons on small screens */
    @media (max-width: 500px) {
      .segmented-control::part(container) {
        flex-direction: column;
      }
    }
  }
</style>