Radio

The Radio component lets you render a set of mutually-exclusive options in your UI, where only one choice can be selected at a time. Under the hood it uses Solid’s context API and it works in conjunction with the Radio.Button slot.

For more information about the Radio.Button slot, check out the Radio.Button documentation.

Usage

To create a radio options in your UI, you need to wrap the Radio.Button slots with the Radio component.

import Radio from '@components/Basic/RadioGroup/Radio';

const App = () => {
    return (
        <>
            <Radio>
                <Radio.Button selected value="red">red</Radio.Button>
                <Radio.Button value="green">green</Radio.Button>
                <Radio.Button value="blue">blue</Radio.Button>
            </Radio>
        </>
    );
};

export default App;

API

Props

Prop Name	Type	Default	Description
style	JSX.CSSProperties	{}	Inline styles to apply directly to the component’s root element.
class	string	""	Additional CSS classes to apply to the component.
ref	RadioRef | undefined	undefined	A reference to the component that gives you access to its methods and the underlying HTML element. Useful if you need to set the selected option programmatically.
disabled	boolean	false	Specify if the radio is disabled.
class-disabled	string	""	Additional CSS classes to apply to the component when disabled.
onChange	(selected: string) => void	undefined	A function that is called every time the selected option changes. It can be used to retrieve the selected option’s value.
onAction	Record<string, (scope?: string, ...args: any[]) => void>	undefined	Extends or overrides the component’s default navigation action handlers. See Implemented Navigation Actions for details.
anchor	string | HTMLElement	undefined	Links navigation to another element. When the anchor element is focused, the radio’s actions will execute. Can be a CSS selector or HTMLElement.

Ref API

To interact with the Radio programmatically, you can use the RadioRef interface. This interface provides properties and methods to access and manipulate the component’s state.

Properties

Property	Type	Description
element	HTMLDivElement	A reference to the radio’s root HTML element, useful for DOM access or styling.
selected	Accessor<string>	The currently selected option. Use selected() to get the value.

Methods

Method	Parameters	Return Value	Description
changeOption	newOption: string	void	Programmatically change the selected option.
changeSelected	direction: prev | next	void	Programmatically change the selected option to the previous or next one.

Implemented Navigation Actions

The Radio component implements the following navigation actions by default:

Action Name	Behavior
move-left	Moves the selected option to the previous one
move-right	Moves the selected option to the next one

You can extend the Radio with additional navigation actions or override the default behavior using the onAction prop:

import Radio from '@components/Basic/RadioGroup/Radio';

<Radio
    onAction={{
        'select': () => console.log('Radio button confirmed!'),
        'move-left': () => console.log('Custom previous logic')  // overrides default move-left behavior
    }}
>
    <Radio.Button value="option1">Option 1</Radio.Button>
    <Radio.Button value="option2">Option 2</Radio.Button>
</Radio>

Using an anchor element lets the Radio respond to navigation actions when another element is focused:

<div id="difficulty" class="menu-item">
    <div>Select Difficulty:</div>
    <Radio anchor=".menu-item" onChange={handleChange}>
        <Radio.Button value='Easy'>Easy</Radio.Button>
        <Radio.Button value='Normal' selected>Normal</Radio.Button>
        <Radio.Button value='Hard'>Hard</Radio.Button>
    </Radio>
</div>

Guide

Retrieve the value of the selected option when it changes

To retrieve the value of the selected option:

• Use the onChange prop to respond when the selected option changes

Steps

1. Provide a callback to the onChange prop to respond to state changes.
2. Inside the callback, access the selected option’s value via the selected argument.

import Radio from '@components/Basic/RadioGroup/Radio';

const App = () => {
    const getValue = (selected: string) => {
        console.log(selected);
    }

    return (
        <>
            <Radio onChange={getValue}>
                <Radio.Button selected value="red">red</Radio.Button>
                <Radio.Button value="green">green</Radio.Button>
                <Radio.Button value="blue">blue</Radio.Button>
            </Radio>
        </>
    );
};

export default App;

Set the selected option Programmatically

The Radio component lets you set the selected option through code.

Steps

1. Declare a ref variable with type RadioRef and pass it to the Radio component.
2. Call ref.changeOption() from anywhere (e.g., a keyboard event or external button) to set a new selected option programmatically.

import Radio, { RadioRef } from '@components/Basic/RadioGroup/Radio';

const App = () => {
    let RadioRef!: RadioRef;

    const handleKeyPress = (e: KeyboardEvent) => {
        if (e.keyCode !== 13) return

        RadioRef.changeOption('green');
    }

    return (
        <>
            <Radio ref={RadioRef} keypress={handleKeyPress}>
                <Radio.Button selected value="red">red</Radio.Button>
                <Radio.Button value="green">green</Radio.Button>
                <Radio.Button value="blue">blue</Radio.Button>
            </Radio>
        </>
    );
};

export default App;