Checkbox

In review

Live · web

Code

// Web: React, consuming @dizyx/nockerl-tokens. (Web is the laggard platform;
// this is the canonical API the published @dizyx/nockerl-react package exposes.
// NockerlCheckbox ships in the package, tri-state included (CheckedState covers 'mixed').
// See the drift note for the per-platform status.)
import { NockerlCheckbox } from '@dizyx/nockerl-react';

export function ScopePicker() {
  const [scopes, setScopes] = useState({ repos: true, issues: false, prs: false });
  const all = Object.values(scopes).every(Boolean);
  const none = Object.values(scopes).every((v) => !v);

  return (
    <fieldset>
      <NockerlCheckbox
        label="Grant repository access"
        checked={all ? true : none ? false : 'mixed'}
        onChange={(on) => setScopes({ repos: on, issues: on, prs: on })}
      />
      <NockerlCheckbox label="Repos" checked={scopes.repos} onChange={(v) => setScopes({ ...scopes, repos: v })} />
      <NockerlCheckbox label="Issues" checked={scopes.issues} onChange={(v) => setScopes({ ...scopes, issues: v })} />
      <NockerlCheckbox label="Pull requests" checked={scopes.prs} onChange={(v) => setScopes({ ...scopes, prs: v })} />
      <NockerlCheckbox label="I am over 18" checked={false} invalid />
    </fieldset>
  );
}

// Android: Jetpack Compose (canonical). Material3 Checkbox, brand-tinted via
// CheckboxDefaults.colors(checkedColor = accentPrimary). The parent Row owns the
// click (toggleable), so the Checkbox passes onCheckedChange = null, exactly the
// multi-select pattern in chat/ui/AskUserQuestionSheet.kt. Tri-state parents use
// TriStateCheckbox(ToggleableState). (See the drift note: tri-state not shipped yet.)
import androidx.compose.material3.Checkbox
import androidx.compose.material3.CheckboxDefaults
import androidx.compose.material3.TriStateCheckbox
import androidx.compose.ui.state.ToggleableState
import com.nockerl.app.core.theme.LocalNockerlColors

val accent = LocalNockerlColors.current.accentPrimary

// Multi-select option row: the Row is toggleable, the box is decorative.
Row(Modifier.toggleable(value = checked, role = Role.Checkbox, onValueChange = onChange)) {
    Checkbox(
        checked = checked,
        onCheckedChange = null,
        colors = CheckboxDefaults.colors(checkedColor = accent),
    )
    Text(option.label)
}

// Tri-state parent, reflecting all / none / some of its children.
TriStateCheckbox(
    state = parentState,                 // On / Off / Indeterminate
    onClick = { onToggleAll(parentState != ToggleableState.On) },
    colors = CheckboxDefaults.colors(checkedColor = accent),
)

// macOS: SwiftUI (canonical). The native checkbox is Toggle + .toggleStyle(.checkbox),
// accent-tinted by the app tint. No multi-select / tri-state list ships in Nockerl
// Voice yet; today selection reads as Image(systemName: "checkmark") tinted
// NockerlTheme.accent (NockerlVoice/UI/AppSettingsView.swift). See the drift note.
Toggle("Accept the terms of service", isOn: $acceptedTerms)
    .toggleStyle(.checkbox)
    .tint(NockerlTheme.accent)

// Indeterminate is not a built-in toggle state on macOS; model it as an explicit
// mixed flag and render the dash glyph, mirroring the web tri-state parent.
Toggle(isOn: parentBinding) { Text("Grant repository access") }
    .toggleStyle(.checkbox)
    .tint(NockerlTheme.accent)

Parameters

Prop	Type	Default	Description
`checked` *	`CheckedState`		Tri-state checked value. `'mixed'` renders the indeterminate dash.
`onChange`	`(next: boolean) => void`		Fired with the next boolean value. Ignored while disabled.
`label`	`string`		Persistent visible label (rendered beside the box, the box is its target).
`description`	`string`		Supporting line under the label.
`size`	`NockerlCheckboxSize`	`'md'`	Box scale. `md` matches the platform default.
`disabled`	`boolean`	`false`	Inert + clearly-seen (never invisible) state.
`invalid`	`boolean`	`false`	Invalid: warm error border + a "!" mark + a message. Color is never alone.
`ariaLabel`	`string`		aria-label when there is no visible `label` (standalone / inline use).

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

Parameter	Type	Default	Description
`checked` *	`Boolean`		Whether the box is ticked. (Two-state `Checkbox`.)
`onCheckedChange` *	`((Boolean) -> Unit)?`		Invoked with the new value. Pass `null` when the parent `Row` is `toggleable` and owns the click.
`state` *	`ToggleableState`		`TriStateCheckbox` only: `On` / `Off` / `Indeterminate`, the parent box for a child group.
`onClick` *	`(() -> Unit)?`		`TriStateCheckbox` only: invoked on click. Pass `null` for a read-only parent.
`modifier`	`Modifier`	`Modifier`	External modifier. The clickable target is usually the surrounding `toggleable` row.
`enabled`	`Boolean`	`true`	When `false`, the box dims (alpha) and stops responding.
`colors`	`CheckboxColors`	`CheckboxDefaults.colors()`	Brand override: `checkedColor = accentPrimary` so the filled square box is the cyan anchor (the box is a square, distinct from the radio circle).

SwiftUI renders the checkbox via the standard Toggle with .toggleStyle(.checkbox): a square box with a checkmark, tinted by the app accent (never the radio circle). State is the isOn binding; isEnabled comes from the environment. There is no built-in indeterminate or invalid parameter. Model mixed as an explicit flag and gate disabled at the binding / view level.

Style	Type	Description
`isOn` *	`Binding<Bool>`	Two-way binding for the checked state.
`titleKey`	`LocalizedStringKey`	The label. Use `""` + `.labelsHidden()` when the row already shows it.
`.toggleStyle(.checkbox)`	`ToggleStyle`	The native macOS checkbox (box + tick). The on tick is tinted by the app accent.
`.tint(_:)`	`modifier`	Sets the checked tint to `NockerlTheme.accent` (the cyan anchor).
`.disabled(_:)`	`modifier`	Sets the environment `isEnabled`; the checkbox dims and stops responding.

Cross-platform drift (tracked for reconciliation)

The checkbox is the multi-selection control, a square box with a check fill, deliberately distinct from its selection-control siblings: a radio is a circle with a centered dot for mutually-exclusive single choice, and a switch is a track + thumb for an instant on/off setting. The square (barely-softened radius.track corners) is the shape that says multi-select, never the radio circle.

Web ships it. Checkbox is exported from @dizyx/nockerl-react (the TypeScript API above), tri-state included: CheckedState covers 'mixed'.
Tri-state / indeterminate is shipped only on web so far. Android has the two-state Checkbox (multi-select via a MutableSet in AskUserQuestionSheet.kt) and TriStateCheckbox is available but unused; Voice has no checkbox at all. The parent/child mixed behaviour here is designed originally. Wire it into a real Compose TriStateCheckbox and a Swift mixed-flag when those screens need it.
Box treatment: the web island draws a square recessed well (1:1, subtly softened radius.track corners) that lifts to a static cyan gradient with a stroke-drawn tick (sibling to the Switch track, distinct from the radio circle). Compose + SwiftUI use the stock platform box (also square) themed only on the checked color. The inset-well + catch-light treatment should flow into a custom Compose box when web’s API ships.
Invalid state: only web models an invalid checkbox (warm border + ! + message). Compose and SwiftUI surface validation at the form level today.