Segmented Control Basic

Set value for an initial selection; disabled disables the control.

Choose a plan

Choose a plan (Disabled)

Code

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

<div class="segmented-control-container">
  <label for="plan-enabled">Choose a plan</label>
  <sv-segmented-control id="plan-enabled">
    <button type="button" class="segmented-control-button" value="1">Personal</button>
    <button type="button" class="segmented-control-button" value="2">Business</button>
    <button type="button" class="segmented-control-button" value="3">Enterprise</button>
  </sv-segmented-control>

  <label for="plan-disabled">Choose a plan (Disabled)</label>
  <sv-segmented-control id="plan-disabled" disabled value="2">
    <button type="button" class="segmented-control-button" value="1">Personal</button>
    <button type="button" class="segmented-control-button" value="2">Business</button>
    <button type="button" class="segmented-control-button" value="3">Enterprise</button>
  </sv-segmented-control>
</div>

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

    .segmented-control-button {
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
    }
  }
</style>