Skip to content
NockerlDesignv2.0.0

Radio group

In review
Live · web

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

Session engine

Inline / horizontal: compact single choice on one line

Visibility

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

Default model

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

Tool approvals

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

Delivery method
Select an option to continue

Sizes: sm and md

Engine (small)
Region (medium)

Selection changed 0 times. The island is live.

Code

Section titled “Code”
// 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} />

Parameters

Section titled “Parameters”
PropTypeDefaultDescription
options *RadioOption[]Group options, rendered in order.
value *stringCurrently selected value (controlled).
onChange(next: string) => voidFired with the next value. Ignored for disabled options.
label *stringVisible group label, wired as the radiogroup's accessible name.
orientation'vertical' | 'horizontal''vertical'Stack vertically (default) or flow inline on one line.
sizeRadioSize'md'Circle scale. md matches the platform default.
invalidbooleanfalseWhole-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.