Radio#

A single-choice group like Select, but every option stays visible with a ● / ○ marker. Arrow keys (or j/k) move the selection.

Import#

TSX 
import { Radio } from '@sigx/terminal';
import type { RadioOption } from '@sigx/terminal';

Usage#

TSX 
/** @jsxImportSource @sigx/terminal */
import { component, defineApp, signal, Radio } from '@sigx/terminal';
import type { RadioOption } from '@sigx/terminal';

const options: RadioOption[] = [
    { label: 'Small', value: 's' },
    { label: 'Medium', value: 'm' },
    { label: 'Large', value: 'l' },
];

const App = component(() => {
    const size = signal('m');
    return () => (
        <box border="single" label="Size">
            <Radio
                options={options}
                model={() => size}
                label="Pick a size"
                autofocus
                onChange={(v) => console.log('size:', v)}
            />
        </box>
    );
});

defineApp(<App />).mount({ clearConsole: true });

Props#

PropTypeNotes
optionsRadioOption[]required — the choices
modelModel<string>two-way bound selected value
labelstringcaption above the group
autofocusbooleangrab focus on mount

Events#

EventPayloadWhen
changestringselection moves

RadioOption#

TypeScript 
interface RadioOption<T = string> {
    label: string;
    value: T;
}

See also#