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.

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.

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;