Link to Fluid's Microsoft Teams channel Link to the support page

Segmented control

Description coming soon

angular logo Angularopen_in_new
react logo Reactopen_in_new
javascript logo Vanillaopen_in_new
angular logo Figmaopen_in_new

Last updated v5.0.0

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="true" 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">
    <span aria-hidden="true" class="material-icons nj-segmented-control-btn__icon">av_timer</span>
    <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="true" 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">
      <span aria-hidden="true" class="material-icons nj-segmented-control-btn__icon">av_timer</span>
      <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">
      <span aria-hidden="true" class="material-icons nj-segmented-control-btn__icon">av_timer</span>
      <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">
      <span aria-hidden="true" class="material-icons nj-segmented-control-btn__icon">av_timer</span>
      <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">
    <span aria-hidden="true" class="material-icons nj-segmented-control-btn__icon">format_align_left</span>
  </button>
  <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 2">
    <span aria-hidden="true" class="material-icons nj-segmented-control-btn__icon">format_align_center</span>
  </button>
  <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 3">
    <span aria-hidden="true" class="material-icons nj-segmented-control-btn__icon">format_align_right</span>
  </button>
  <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 4" disabled>
    <span aria-hidden="true" class="material-icons nj-segmented-control-btn__icon">format_align_justify</span>
  </button>
</div>

Radio-button

Select