Segmented control
Segmented controls are helpful to show closely-related options users can choose from. They can be used to switch views for example.
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>