Toggle — Malkai design system

Overview

Toggle is the binary selector family. It has exactly two answers and two visual variants. Use joined segments when both alternatives need names; use a switch when one immediate setting is simply on or off.

Usage

Switch immediately between two statesA toggle is binary and applies the selected state without a separate Save or confirmation action.
Use Segmented toggle for two named modesBoth mutually exclusive choices remain visible, and the selected segment identifies the current mode.
Use Switch for one on-or-off settingThe label names the setting once and the switch communicates whether it is enabled. Use Radio button or Dropdown for three or more choices.

Anatomy

Segmented toggle

1

2 3

1Shared shell. One compact border holds exactly two equal-width segments and presents them as one question.
2Selected segment. The current mode uses the solid accent fill and exposes its state with aria-pressed="true".
3Alternate segment. The other named answer remains visible and pressable so the change is predictable before it happens.

Switch

1

2

1Track. The 48 × 26px binary face. Quiet means off; solid accent means on. The setting name sits beside it.
2Knob. The 20px light face moves between the two ends. It illustrates the state; aria-pressed carries the meaning.

Variants and states

Segmented toggle states

Only one segment is selected. Hover belongs to the unselected alternative; focus belongs to the segment the keyboard will activate.

State	Specimen	What changes
Rest		The selected segment carries the accent fill. The alternative rests on the surface with ordinary text.
Hover		The alternative gains a 1px brand outline and gold text. The selected segment stays stable, so hover cannot be mistaken for selection.
Keyboard focus		The focused segment receives the standard 2px camel outline, drawn inward so the group does not move.

Switch states

Off and on are the two answers of aria-pressed. Hover previews the track as pressable without moving the knob.

State	Off	On	What changes
Rest			Off uses the quiet track and bordered knob. On uses the solid accent track and moves the light knob to the far end.
Hover			Off gains a brand outline and an accent edge on its knob; on deepens the gold track. Position does not change until press.
Keyboard focus			The standard 2px camel outline surrounds the complete track in either state.

Do and don't

Segmented toggle

Do

Keep exactly two short, parallel alternatives in one joined control.

Don't

Do not add a third segment. Three visible choices are a radio group; a longer or space-constrained set is a dropdown.

Switch

Do

Use one track for one binary state. The surrounding interface owns the setting name.

Off On

Don't

Do not add Off and On as competing labels. The track position already exposes that state.

Copy

Segments name both answersUse short parallel labels or symbols. Each segment must make sense without the selected styling.
A switch label names the enabled conditionName the setting, not the mechanism and not “On / Off”. The track already communicates the state.

Accessibility

Segments are one named grouprole="group" names the question; each real button exposes its answer with aria-pressed.
The switch is a named toggle buttonThe external setting label is also its accessible name; the knob is decoration.
Immediate change is perceivableThe setting changes on press and any result that is not visually obvious is announced.

When to reach for something else

The answer waits for SaveUse a checkbox or radio. A toggle always applies immediately.
There are three or more answersUse radio buttons when the set should stay visible, or Dropdown when space is constrained.
The object changes lifecycle stateUse State toggle; that is record work, not a binary preference or display mode.

Markup

<span class="mk-unit-toggle" role="group" aria-label="Options">
  <button type="button" aria-pressed="true">Option 1</button>
  <button type="button" aria-pressed="false">Option 2</button>
</span>

<button class="mk-theme-switch" type="button" aria-pressed="false"
        aria-label="Setting">
  <span class="mk-theme-switch-knob" aria-hidden="true"></span>
</button>