Radio group

In review

Live · web

Vertical list: label + description, one chosen (the filled dot). Tab in, Arrow to move + select

Session engine

Cloud AgentSDK manages context in JSONLLocal EngineOur lossless context management

Inline / horizontal: compact single choice on one line

Visibility

PrivateTeamPublic

Radio cards: selectable cards, the chosen one gets a cyan ring + wash

Default model

Large 2.0Deepest reasoning · highest costMedium 4.6Balanced speed and qualityLocal · GPURuns on your cluster · no cloud cost

Disabled option: inert but still legible (Plan mode is locked)

Tool approvals

Ask firstApprove every tool before it runsAuto-runRun read-only tools without askingPlan modeDraft a plan, then run on approval

Error / required: warm ring + a message (color is never alone)

Delivery method*

Email digestPush notificationDo not notify me

!Select an option to continue

Sizes: sm and md

Engine (small)

Cloud AgentSDK manages context in JSONLLocal EngineOur lossless context management

Region (medium)

EU (Frankfurt)US (Fly)

Selection changed 0 times. The island is live.

Code

TypeScriptKotlinSwift

// Web: React, consuming @dizyx/nockerl-tokens. (Web is the laggard platform;
// this is the canonical API the published @dizyx/nockerl-react package exposes.)
import { NockerlRadioGroup } from '@dizyx/nockerl-react';

export function EngineChoice() {
  const [engine, setEngine] = useState('api-server');
  return (
    <NockerlRadioGroup
      label="Session engine"
      value={engine}
      onChange={setEngine}
      options={[
        { value: 'cloud-agent', label: 'Cloud Agent', description: 'SDK manages context in JSONL' },
        { value: 'api-server', label: 'Local Engine', description: 'Our lossless context management' },
      ]}
    />
  );
}

// Radio cards: same control, variant="card" + orientation="horizontal".
<NockerlRadioGroup label="Default model" variant="card" orientation="horizontal"
  value={model} onChange={setModel} options={MODELS} />

// Android: Jetpack Compose (canonical). Material3 RadioButton, brand-themed.
// The M3 radio-row idiom: the PARENT Row owns the click via Modifier.selectable
// with Role.RadioButton, so the whole label is one a11y unit; the child
// RadioButton takes onClick = null. (chat/ui/SessionEngineSupport.kt)
import androidx.compose.material3.RadioButton
import androidx.compose.material3.RadioButtonDefaults
import androidx.compose.foundation.selection.selectableGroup
import androidx.compose.foundation.selection.selectable
import androidx.compose.ui.semantics.Role

Column(Modifier.selectableGroup()) {
    engines.forEach { engine ->
        val selected = engine == selectedEngine
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier
                .fillMaxWidth()
                .selectable(
                    selected = selected,
                    onClick = { onEngineChange(engine) },
                    role = Role.RadioButton,
                ),
        ) {
            RadioButton(
                selected = selected,
                onClick = null,
                colors = RadioButtonDefaults.colors(
                    selectedColor = LocalNockerlColors.current.accentPrimary,
                ),
            )
            Text(engine.label, style = MaterialTheme.typography.bodyMedium)
        }
    }
}

// macOS: SwiftUI (canonical). Nockerl Voice consumes the published NockerlRadio for a
// single choice inside a list row (see NockerlVoice/UI/StylesView.swift). The ring plus
// centered dot is the same circle-and-dot the other platforms draw. Where the choice is
// a short set of peers instead, Voice reaches for NockerlSegmented, and the platform
// Picker(.inline / .segmented) is the system stand-in. See the drift note below.
NockerlRadio(
    selected: engine == .cloud,
    onSelect: { engine = .cloud },
    label: "Cloud",
    description: "Runs on the hosted engine"
)

// Native alternative for long lists, an inline Picker (chosen row = checkmark):
Picker("Session engine", selection: $engine) {
    ForEach(SessionEngine.allCases) { engine in
        Text(engine.label).tag(engine)
    }
}
.pickerStyle(.inline)

Parameters

TypeScriptKotlinSwift

Prop	Type	Default	Description
options *	RadioOption[]	n/a	Group options, rendered in order.
value *	string	n/a	Currently selected value (controlled).
onChange	(next: string) => void	n/a	Fired with the next value. Ignored for disabled options.
label *	string	n/a	Visible group label, wired as the radiogroup's accessible name.
orientation	'vertical' | 'horizontal'	'vertical'	Stack vertically (default) or flow inline on one line.
size	RadioSize	'md'	Circle scale. md matches the platform default.
invalid	boolean	false	Whole-group invalid: warm error ring + a required message. Color never alone.
variant	'list' | 'card'	'list'	Render each option as a selectable CARD instead of a list row.

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

Parameter	Type	Default	Description
selected *	Boolean	n/a	Whether this option is the chosen one. Drives the centered dot.
onClick	(() -> Unit)?	null	Pass null on the RadioButton. The parent Modifier.selectable owns the click so the whole row is one a11y unit.
enabled	Boolean	true	When false, the option is dimmed (alpha) and non-interactive.
colors	RadioButtonColors	RadioButtonDefaults.colors()	Brand override: selectedColor = accentPrimary, matching Switch/Checkbox.
Modifier.selectable	selected, onClick, role	n/a	On the parent row: role = Role.RadioButton + the group wrapped in Modifier.selectableGroup() for roving focus + single-choice semantics.
interactionSource	MutableInteractionSource	remembered	Source for the ripple/press interactions (Android ripple, not hover).

The Swift tab documents the published NockerlRadio, which Nockerl Voice consumes for a single choice inside a list row. Each radio owns its own selected state, so a group is built by rendering one per option and writing the choice in onSelect.

Parameter	Type	Default	Description
selected *	Bool	n/a	Whether this option is the chosen one. Draws the ring with a centered dot; unselected is the bare ring.
onSelect	(() -> Void)?	nil	Fired when the row is chosen. Omit for a presentational radio inside an already-tappable row.
label	String?	nil	Visible text beside the ring. Pass nil when the surrounding row already carries the name.
description	String?	nil	Optional secondary line under the label, in the muted ink.
enabled	Bool	true	Disabled dims the row but keeps it legible, and it stops firing onSelect.

Cross-platform drift (tracked for reconciliation)

Radio group is the mutually-exclusive single choice, distinct from its selection-control siblings: a checkbox is multi-select (box + tick, with a tri-state mixed), a switch is an instant on/off setting (track + thumb), and a segmented control is single choice for a small, flat set of peers (no per-option description). Reach for a radio group when options need labels and descriptions, or for 4+ choices.

Real divergences between the shipped platforms:

• All three platforms draw the circle and dot. Voice consumes the published NockerlRadio, so macOS is no longer the odd one out; where the choice is a short set of peers it reaches for NockerlSegmented instead, and a long list still falls back to a Menu or Picker with a checkmark. The web demo’s radio cards and the error/required group are designed here first, so this page is their spec rather than a report on either app.
• Selection treatment. Compose/web: a circle with a centered cyan dot. Swift: a cyan outline on the chosen segment. One single-choice expression per platform: unified, but the marks differ by platform idiom.
• Roving focus. Web uses roving tabindex (one tab stop, Arrow keys move + select); Compose gets this free from Modifier.selectableGroup(); Swift’s segmented buttons are individually focusable.