Switch / toggle

In review

Live · web

Settings rows: label + control (the control is its own target)

Push notificationsAlerts when a session needs you

Haptic feedbackVibrate on button confirms

Enable thinkingLocked by your administrator

Parallel tool callsSaving your preference…

States: tab in, toggle with Space / Enter

OffOnDisabled offDisabled onLoading

Sizes & inline use

SmallMediumStream tokens

Toggled 0 times. The island is live.

Code

// Web: React, consuming @dizyx/nockerl-tokens. (Web is the laggard platform;
// this is the canonical API the published @dizyx/nockerl-react package exposes.
// NockerlSwitch ships in the package; see the drift note for the per-platform status.)
import { NockerlSwitch } from '@dizyx/nockerl-react';

export function SettingsRows() {
  const [push, setPush] = useState(true);
  const [haptics, setHaptics] = useState(false);
  return (
    <>
      <NockerlSwitch label="Push notifications" checked={push} onChange={setPush} />
      <NockerlSwitch label="Haptic feedback" checked={haptics} onChange={setHaptics} />
      <NockerlSwitch label="Parallel tool calls" checked={false} loading />
      <NockerlSwitch label="Enable thinking" checked disabled />
    </>
  );
}

// Android: Jetpack Compose (canonical). Material3 Switch, brand-tinted ON via
// SwitchDefaults.colors(checkedTrackColor = accentPrimary). Pair with
// NockerlSettingsRow as the row's trailingContent. (core/ui/AvatarSettingsSheet.kt)
import androidx.compose.material3.Switch
import androidx.compose.material3.SwitchDefaults
import com.nockerl.app.core.theme.LocalNockerlColors

Switch(
    checked = pushEnabled,
    onCheckedChange = viewModel::setPushEnabled,
    enabled = true,
    colors = SwitchDefaults.colors(
        checkedTrackColor = LocalNockerlColors.current.accentPrimary,
    ),
)

// macOS / iOS SwiftUI, from the NockerlDesign package: the ratified
// switch drawn to the web canon. Recessed-well OFF track, static cyan gradient
// ON layer that CROSS-FADES in by opacity, a lifted thumb that slides and
// squashes on press. Interpolatable props only; jumps under reduced motion.
import NockerlDesign

// The native Toggle keeps its label/keyboard/a11y; the style draws the control:
Toggle("Launch at login", isOn: $launchAtLogin)
    .toggleStyle(.nockerl)

// Bare control (a SettingsCard row already carries the text):
NockerlToggle(isOn: $launchAtLogin, accessibilityLabel: "Launch at login")

// Dense rows:
Toggle("Notifications", isOn: $notify)
    .toggleStyle(.nockerl(size: .sm))

Parameters

Prop	Type	Default	Description
`checked` *	`boolean`		Controlled checked state.
`onChange`	`(next: boolean) => void`		Fired with the next checked value. Ignored while disabled or loading.
`label`	`string`		Accessible name. Rendered as a persistent label when `label` is set, else required.
`description`	`string`		Supporting line under the label (label rows only).
`size`	`NockerlSwitchSize`	`'md'`	Track + thumb scale. `md` matches the Material/system default.
`disabled`	`boolean`	`false`	Inert + clearly-seen (never invisible) state.
`loading`	`boolean`	`false`	Awaiting async confirmation. Shows a spinner in the thumb and blocks re-toggle.
`ariaLabel`	`string`		aria-label when there is no visible `label` (icon-only / inline use).

Also accepts the native <button> attributes (e.g. onClick, disabled, id, aria-*, data-*), forwarded straight through, plus a forwarded ref.

Parameter	Type	Default	Description
`checked` *	`Boolean`		Whether the switch is on.
`onCheckedChange` *	`((Boolean) -> Unit)?`		Invoked with the new value. Pass `null` to render a read-only switch.
`modifier`	`Modifier`	`Modifier`	External modifier. The switch is usually the `trailingContent` of a `NockerlSettingsRow`.
`enabled`	`Boolean`	`true`	When `false`, the switch dims (alpha) and stops responding.
`colors`	`SwitchColors`	`SwitchDefaults.colors()`	Brand override: `checkedTrackColor = accentPrimary` so the ON track is the cyan anchor.
`thumbContent`	`(@Composable -> Unit)?`	`null`	Optional glyph inside the thumb (e.g. a check when on).

NockerlToggleStyle draws the ratified switch on the native Toggle (which keeps the switch role, value, and keyboard toggling). NockerlToggle is the convenience wrapper. Loading is web-only for now (async settings confirm has no native case yet).

Parameter	Type	Default	Description
`.toggleStyle(.nockerl)`	`ToggleStyle`		The ratified switch: recessed-well OFF track, static cyan gradient ON layer (opacity cross-fade, so the fill never hard-cuts), lifted sliding thumb, press squash.
`size`	`NockerlToggleSize`	`.md`	`.md` 44×26 / 20pt thumb (the system scale) · `.sm` 36×22 / 16pt, via `.nockerl(size: .sm)`.
`NockerlToggle(_:isOn:size:accessibilityLabel:)`	`View`		Wrapper: labeled row, or the BARE control when the label is `nil` (`labelsHidden` + your `accessibilityLabel`; the host row carries the text).
`.disabled(_:)`	`modifier`		OFF dims the whole control to 55% (clearly seen, never invisible); ON halves the cyan layer and drops the thumb lift; those are the canon’s two disabled reads.
`reduced motion`	`behavior`		Slide + cross-fade jump straight to the end state under `accessibilityReduceMotion`.

Cross-platform drift (tracked for reconciliation)

Track shape: web draws a recessed well that lifts to a static cyan gradient; Compose + SwiftUI use the stock platform track (only the ON color is themed). The catch-light / inset-well treatment is still owed a custom Compose track.
Loading: only web models a loading state (async settings write). Compose and SwiftUI gate this at the call site (no in-thumb spinner).