Skip to content
EN KO VI NE KM ID
Design business cards Character collection 16 designs · PNG / SVG / PDF

Segmented toggle

For choosing which lens a list is seen through — two to four options, and the view changes the moment one is picked.

Actions

Live preview

Source

<fieldset class="dc-seg">
  <legend class="dc-sr">작업 상태로 보기</legend>
  <div class="dc-seg__track">
    <input class="dc-seg__in" type="radio" name="dc-seg-state" id="dc-seg-all" checked />
    <label class="dc-seg__lb" for="dc-seg-all">전체</label>
    <input class="dc-seg__in" type="radio" name="dc-seg-state" id="dc-seg-run" />
    <label class="dc-seg__lb" for="dc-seg-run">진행 중</label>
    <input class="dc-seg__in" type="radio" name="dc-seg-state" id="dc-seg-done" />
    <label class="dc-seg__lb" for="dc-seg-done">완료</label>
  </div>
</fieldset>
.dc-seg {
  margin: 0;
  padding: var(--dc-4);
  border: 0;
  background: var(--dc-bg);
  font-family: var(--dc-font);
}
.dc-seg__track {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--dc-r-md);
  background: var(--dc-sunken);
}
.dc-seg__in {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.dc-seg__lb {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: var(--dc-1);
  min-height: 44px;
  padding: 0 var(--dc-3);
  border-radius: calc(var(--dc-r-md) - 3px);
  color: var(--dc-text-sub);
  font-family: var(--dc-font);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dc-fast), color var(--dc-fast);
}
.dc-seg__in:checked + .dc-seg__lb {
  background: var(--dc-surface);
  color: var(--dc-text);
  box-shadow: var(--dc-sh-1);
}
.dc-seg__in:focus-visible + .dc-seg__lb {
  outline: 2px solid var(--dc-brand);
  outline-offset: 2px;
}
.dc-seg__ico {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

How to use it

  • Two to four options; past five, switch to a dropdown or tabs
  • Keep labels to one or two words of similar length
  • The result must change on selection — if it needs an Apply button, this is the wrong piece

Watch out for

  • Build it from radio inputs so arrow keys and screen readers treat it as one group
  • Keep each segment at least 44px tall; narrow segments invite mis-taps

Next