Radio

const Radio: <T>(props) => Element;

Single-select radio group with keyboard navigation.

Navigate items with ↑/↓ (or j/k), select with Space or Enter. Supports both horizontal and vertical layout via direction.

Type Parameters

Type Parameter	Default type
T	string

Parameters

Parameter	Type
props	RadioProps<T> & RefAttributes<RadioHandle<T>>

Returns

Element

Example

const [size, setSize] = useState<string>();

<Radio
  items={[
    { label: "Small",  value: "sm" },
    { label: "Medium", value: "md" },
    { label: "Large",  value: "lg" },
  ]}
  value={size}
  onChange={setSize}
/>

---

Type Parameters

Type Parameter	Default type
T	string

Properties

Property	Type	Description
direction?	"row" | "column"	Layout direction (default: “column”)
disabled?	boolean	Whether the entire group is disabled
focusedItemStyle?	Style	Style for the focused item
gap?	number	Gap between items (default: 0)
items	RadioItem<T>[]	Radio options
itemStyle?	Style	Style for each radio item
onChange	(value) => void	Called when selection changes
selectedChar?	string	Custom character for selected state (default: ”(●)”)
selectedItemStyle?	Style	Style for the selected item
style?	Style	Style for the radio group container
unselectedChar?	string	Custom character for unselected state (default: ”(○)”)
value	T | undefined	Currently selected value

---

RadioItem

A single option inside a Radio group.

Type Parameters

Type Parameter	Default type
T	string

Properties

Property	Type	Description
disabled?	boolean	Whether this option is disabled
label	string	Display label
value	T	Value returned on selection

---

RadioHandle

Handle for Radio — exposes selected value

Extends

• FocusableHandle

Type Parameters

Type Parameter	Default type
T	string

Methods

blur()

blur(): void;

Programmatically blur (unfocus) this element

Returns

void

Inherited from

FocusableHandle.blur

---

focus()

focus(): void;

Programmatically focus this element

Returns

void

Inherited from

FocusableHandle.focus

---

scrollIntoView()

scrollIntoView(options?): void;

Scroll the nearest parent ScrollView to make this element visible. Behaves like the DOM Element.scrollIntoView() method. No-op if the element is not inside a ScrollView.

Parameters

Parameter	Type	Description
options?	ScrollIntoViewOptions	Alignment options (default: { block: "nearest" })

Returns

void

Example

const inputRef = useRef<InputHandle>(null);

// Minimal scroll — just enough to make it visible
inputRef.current?.scrollIntoView();

// Center the element in the viewport
inputRef.current?.scrollIntoView({ block: "center" });

Inherited from

FocusableHandle.scrollIntoView

Properties

Property	Modifier	Type	Description	Inherited from
isFocused	readonly	boolean	Whether this element is currently focused	FocusableHandle.isFocused
value	readonly	T | undefined	Currently selected value	-