Segmented control

Description coming soon

Example

<div class="nj-segmented-control" role="group" aria-label="View" data-value="Item 1">
  <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 1">Item 1</button>
  <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 2">Item 2</button>
  <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 3">Item 3</button>
  <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 4">Item 4</button>
  <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 5">Item 5</button>
  <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 6">
    <i class="material-icons nj-segmented-control-btn__icon">av_timer</i>
    <span>Item 6</span>
  </button>
  <button class="nj-segmented-control-btn" type="button" aria-pressed="false" disabled data-value="Item 7">Item 7</button>
</div>

Disabled

To disable a control, simply add the disabled boolean attribute to the <button> element.

You can have disabled checked radio buttons.

<div class="nj-segmented-control" role="group" aria-label="View" data-value="Item 1">
  <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 1">Item 1</button>
  <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 2" disabled>Item 2</button>
  <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 3">Item 3</button>
</div>

Size variations

Segmented control comes in 3 sizes:

  • small: .nj-segmented-control--sm
  • medium: default
  • large: .nj-segmented-control--lg
Small:
Medium (default):
Large:
<div style="display: flex; flex-direction: column; gap: var(--nj-size-space-24); align-items: flex-start">
  <h5 style="margin: 0">Small:</h5>
  <div class="nj-segmented-control nj-segmented-control--sm" role="group" aria-label="View" data-value="Item 5">
    <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 1">Item 1</button>
    <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 2">Item 2</button>
    <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 3">Item 3</button>
    <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 4">Item 4</button>
    <button class="nj-segmented-control-btn" type="button" aria-pressed="true" data-value="Item 5">Item 5</button>
    <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 6">
      <i class="material-icons nj-segmented-control-btn__icon">av_timer</i>
      <span>Item 6</span>
    </button>
    <button class="nj-segmented-control-btn" type="button" aria-pressed="false" disabled data-value="Item 7">Item 7</button>
  </div>
  <h5 style="margin: 0">Medium (default):</h5>
  <div class="nj-segmented-control" role="group" aria-label="View" data-value="Item 5">
    <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 1">Item 1</button>
    <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 2">Item 2</button>
    <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 3">Item 3</button>
    <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 4">Item 4</button>
    <button class="nj-segmented-control-btn" type="button" aria-pressed="true" data-value="Item 5">Item 5</button>
    <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 6">
      <i class="material-icons nj-segmented-control-btn__icon">av_timer</i>
      <span>Item 6</span>
    </button>
    <button class="nj-segmented-control-btn" type="button" aria-pressed="false" disabled data-value="Item 7">Item 7</button>
  </div>
  <h5 style="margin: 0">Large:</h5>
  <div class="nj-segmented-control nj-segmented-control--lg" role="group" aria-label="View" data-value="Item 5">
    <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 1">Item 1</button>
    <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 2">Item 2</button>
    <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 3">Item 3</button>
    <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 4">Item 4</button>
    <button class="nj-segmented-control-btn" type="button" aria-pressed="true" data-value="Item 5">Item 5</button>
    <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 6">
      <i class="material-icons nj-segmented-control-btn__icon">av_timer</i>
      <span>Item 6</span>
    </button>
    <button class="nj-segmented-control-btn" type="button" aria-pressed="false" disabled data-value="Item 7">Item 7</button>
  </div>
</div>

Icon only

<div class="nj-segmented-control" role="group" aria-label="View" data-value="Item 1">
  <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 1">
    <i class="material-icons nj-segmented-control-btn__icon">format_align_left</i>
  </button>
  <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 2">
    <i class="material-icons nj-segmented-control-btn__icon">format_align_center</i>
  </button>
  <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 3">
    <i class="material-icons nj-segmented-control-btn__icon">format_align_right</i>
  </button>
  <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 4" disabled>
    <i class="material-icons nj-segmented-control-btn__icon">format_align_justify</i>
  </button>
</div>