Checkbox

In review

Live · web

Form: multi-select, with a label + description (the box is the target)

Accept the terms of serviceYou must agree before continuingSend me product updatesOccasional email, no spamShare anonymous usage dataLocked by your administrator!I am over 18Confirm to create an account! Required to continue

Tri-state group: the parent reflects all / none / some of its children

Grant repository accessSome scopes

ReposIssuesPull requests

States: tab in, toggle with Space

UncheckedCheckedMixedDisabled offDisabled on!Invalid

Sizes & standalone use

SmallMediumSelect all rows

Toggled 0 times. The island is live.

Code

TypeScript

// 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>
  );
}

Kotlin

// 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),
)

Swift

// 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

TypeScript

Prop	Type	Default	Description
checked *	CheckedState	n/a	Tri-state checked value. 'mixed' renders the indeterminate dash.
onChange	(next: boolean) => void	n/a	Fired with the next boolean value. Ignored while disabled.
label	string	n/a	Persistent visible label (rendered beside the box, the box is its target).
description	string	n/a	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	n/a	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.

Kotlin

Parameter	Type	Default	Description
checked *	Boolean	n/a	Whether the box is ticked. (Two-state Checkbox.)
onCheckedChange *	((Boolean) -> Unit)?	n/a	Invoked with the new value. Pass null when the parent Row is toggleable and owns the click.
state *	ToggleableState	n/a	TriStateCheckbox only: On / Off / Indeterminate, the parent box for a child group.
onClick *	(() -> Unit)?	n/a	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).

Swift

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	Default	Description
isOn *	Binding<Bool>	n/a	Two-way binding for the checked state.
titleKey	LocalizedStringKey	n/a	The label. Use "" + .labelsHidden() when the row already shows it.
.toggleStyle(.checkbox)	ToggleStyle	n/a	The native macOS checkbox (box + tick). The on tick is tinted by the app accent.
.tint(_:)	modifier	n/a	Sets the checked tint to NockerlTheme.accent (the cyan anchor).
.disabled(_:)	modifier	n/a	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.