Radio.Button

The Radio.Button slot represents a single option within a Radio. It renders a clickable control with a label.

Usage

To create a Radio.Button you need to wrap it in the Radio component and provide a value to it. You must also provide the selected prop to the Radio.Button you wish to be selected by default.

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.
value	string	undefined	The string value the radio button is associated with.
selected	boolean	false	Specify if the radio button is selected.
disabled	boolean	false	Specify if the radio button is disabled.
class-selected	string	""	Additional CSS classes to apply to the button when selected.
class-disabled	string	""	Additional CSS classes to apply to the button when disabled.

Slots

Radio.ButtonLabel

Allows customization of the radio button’s label. This slot can be used to include additional elements in the label or place the label before the control of the radio button.

Properties

Prop Name	Type	Default	Description
before	boolean	false	Specify if the label should be put before the radio button control
children	JSX.Element	undefined	Content to render inside the label, which can be any valid JSX element.

Usage

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

const App = () => {
    return (
        <Radio>
            <Radio.Button value="windowed">Windowed</Radio.Button>
            <Radio.Button value="fullscreen">Fullscreen Mode</Radio.Button>
            <Radio.Button value="borderless">
                <Radio.ButtonLabel>
                    <Block style={{ 'font-weight': 'bold' }}>Borderless</Block>
                </Radio.ButtonLabel>
            </Radio.Button>
        </Radio>
    );
};

export default App;

Caution

If the Label slot is used then the other children of the Radio.Button component won’t be rendered.

Radio.ButtonControl

This slot allows you to customize the control of the Radio.Button component when it is not selected. Use it to apply custom styles, classes or include additional elements in the control of the radio button.

Properties

Prop Name	Type	Default	Description
style	JSX.CSSProperties	{}	Inline styles to apply directly to the radio button control.
class	string	""	Additional CSS classes to style the radio button control.
children	JSX.Element	undefined	Content to render inside the radio button control, which can be any valid JSX element.

Usage

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

const App = () => {
    return (
        <Radio>
            <Radio.Button value="windowed">Windowed</Radio.Button>
            <Radio.Button value="fullscreen">Fullscreen Mode</Radio.Button>
            <Radio.Button value="borderless">
                Borderless
                <Radio.ButtonControl style={{'border-color': 'blueviolet', "background-color": 'black'}} />
            </Radio.Button>
        </Radio>
    );
};

export default App;

Radio.ButtonIndicator

This slot allows you to override the default indicator displayed when the radio button is selected. Use it to apply custom styles, classes or include additional elements in the indicator of the radio button.

Properties

Prop Name	Type	Default	Description
style	JSX.CSSProperties	{}	Inline styles to apply directly to the radio button indicator.
class	string	""	Additional CSS classes to style the radio button indicator.
children	JSX.Element	undefined	Content to render inside the radio button indicator, which can be any valid JSX element.

Usage

import Radio from '@components/Basic/RadioGroup/Radio';
import Block from '@components/Layout/Block/Block';
import Icon from '@assets/check-mark.svg?component-solid';

const App = () => {
    return (
        <Radio>
            <Radio.Button value="windowed">Windowed</Radio.Button>
            <Radio.Button value="fullscreen">Fullscreen Mode</Radio.Button>
            <Radio.Button value="borderless">
                Borderless
                <Radio.ButtonControl style={{'border-color': 'blueviolet', "background-color": 'black'}}>
                   <Radio.ButtonIndicator style={{"background-color": 'green'}}>
                       <Icon style={{width: '100%', height: '100%' }}/>
                   </Radio.ButtonIndicator>
                </Radio.ButtonControl>
            </Radio.Button>
        </Radio>
    );
};

export default App;

Note

The Radio.ButtonIndicator slot is only rendered when used inside the Radio.ButtonControl slot.

Guide

You can find examples of how to work with the radio buttons in the Radio documentation.