# RadioButton

*Category:* Components
*Section:* Interaction
*Source:* https://uikit.developers.rio.cloud/#/components/radiobutton
*Captured:* 2026-04-27T14:57:24.606Z

NoteWhen using the custom option, make sure to wrap the children with the class name radio-text-wrapper. For using the radio tick, use an element with class name radio-text.

## RadioButton

### Example: Last selected option: nothing selected yet

Option one is selected by default
Option two can be something else and selecting it will deselect option one
Option three is disabled

1 2 3

Km
Miles
Last selected option: nothing selected yet

#### React (tsx)

```tsx
import RadioButton from '@rio-cloud/rio-uikit/RadioButton';
import { useState } from 'react';

export default () => {
    const [lastSelectedOption, setLastSelectedOption] = useState('');

    const handleClick = (event: React.MouseEvent<HTMLInputElement>) => {
        console.log(event.currentTarget.value);
        setLastSelectedOption(event.currentTarget.value);
    };

    return (
        <div>
            <div>
                <RadioButton name='radios' value='option1' defaultChecked onClick={handleClick}>
                    Option one is selected by default
                </RadioButton>
            </div>
            <div>
                <RadioButton name='radios' value='option2' onClick={handleClick}>
                    Option two can be something else and selecting it will deselect option one
                </RadioButton>
            </div>
            <div>
                <RadioButton name='radios' value='option3' disabled onClick={handleClick}>
                    Option three is disabled
                </RadioButton>
            </div>

            <hr />

            <div>
                <RadioButton name='radiosInline' value='1' onClick={handleClick} inline>
                    1
                </RadioButton>
                <RadioButton name='radiosInline' value='2' onClick={handleClick} inline>
                    2
                </RadioButton>
                <RadioButton name='radiosInline' value='3' onClick={handleClick} inline>
                    3
                </RadioButton>
            </div>

            <hr />

            <div>
                <RadioButton name='radiosRight' value='km' right onClick={handleClick} inline>
                    Km
                </RadioButton>
            </div>
            <div>
                <RadioButton name='radiosRight' value='miles' right onClick={handleClick} inline>
                    Miles
                </RadioButton>
            </div>

            <div className='margin-top-25 text-color-dark'>
                Last selected option: {lastSelectedOption || <i>nothing selected yet</i>}
            </div>
        </div>
    );
};
```

#### HTML (html)

```html
<div>
    <div>
        <label class="radio" tabindex="0">
            <input type="radio" class="" name="radios" value="option1" checked="">
            <span class="radio-text">
                <span>Option one is selected by default</span>
            </span>
        </label>
    </div>
    <div>
        <label class="radio" tabindex="0">
            <input type="radio" class="" name="radios" value="option2">
            <span class="radio-text">
                <span>Option two can be something else and selecting it will deselect option one</span>
            </span>
        </label>
    </div>
    <div>
        <label class="radio" tabindex="0">
            <input type="radio" disabled="" class="" name="radios" value="option3">
            <span class="radio-text">
                <span>Option three is disabled</span>
            </span>
        </label>
    </div>
    <hr>
    <div>
        <label class="radio radio-inline" tabindex="0">
            <input type="radio" class="" name="radiosInline" value="1">
            <span class="radio-text">
                <span>1</span>
            </span>
        </label>
        <label class="radio radio-inline" tabindex="0">
            <input type="radio" class="" name="radiosInline" value="2">
            <span class="radio-text">
                <span>2</span>
            </span>
        </label>
        <label class="radio radio-inline" tabindex="0">
            <input type="radio" class="" name="radiosInline" value="3">
            <span class="radio-text">
                <span>3</span>
            </span>
        </label>
    </div>
    <hr>
    <div>
        <label class="radio radio-inline" tabindex="0">
            <input type="radio" class="icon-right" name="radiosRight" value="km">
            <span class="radio-text">
                <span>Km</span>
            </span>
        </label>
    </div>
    <div>
        <label class="radio radio-inline" tabindex="0">
            <input type="radio" class="icon-right" name="radiosRight" value="miles">
            <span class="radio-text">
                <span>Miles</span>
            </span>
        </label>
    </div>
    <div class="margin-top-25 text-color-dark">Last selected option: <i>nothing selected yet</i>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| icon | string | — | Define any rioglyph icon like "rioglyph-truck". |
| iconLabelPosition | 'vertical' \| 'horizontal' | 'vertical' | The label position. Possible values are: 'horizontal' or 'vertical'. |
| iconSize | number | 16 | The icon Size in px. |
| label | string \| ReactNode | — | Defines the label text. |
| onClick | MouseEventHandler<{ value: string \| string[] \| number; }> | () => {} | Callback function that is invoked when the radio button is clicked. |
| onChange | ChangeEventHandler | () => {} | Callback function that is invoked when the radio button is toggled and the state should change (for controlled usage). |
| checked | boolean | — | Defines whether the radio is checked (for controlled usage). |
| defaultChecked | boolean | — | Defines whether the radio is initially checked (state can be changed on click). |
| disabled | boolean | false | Defines whether the checkbox is disabled. |
| className | string | — | Additional classes to be set on the input element. |
| inline | boolean | false | Defines whether the radio button is applying an inline style. Use this in combination with other radio buttons. |
| right | boolean | false | Displays the icon on the right side of the text. |
| custom | boolean | false | Allows for rendering a completely different layout with or without a radio tick. |
| name | string | — | Name to be given to the input element. |
| value | string | — | The value attribute is a string containing the radio button's value but it is never shown to the user. It serves a special purpose for inputs of type radio: when a form is submitted, only radio buttons which are currently checked are submitted, and the reported value is the value of the value attribute. If the value is not otherwise specified, it is the string on by default. This is useful when using native FormData when submitting a form to get the selected radio button value. |
| tabIndex | number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
| inputRef | Ref<HTMLInputElement> | — | Ref which is added to the input element. |

## Controlled example

### Example: Example 2

Option 1 Option 2 Option 3

#### React (tsx)

```tsx
import { useState } from 'react';

import RadioButton from '@rio-cloud/rio-uikit/RadioButton';

export default () => {
    const [selectedOption, setSelectedOption] = useState(1);

    return (
        <div>
            <RadioButton name='radioGroup' onChange={() => setSelectedOption(1)} checked={selectedOption === 1} inline>
                Option 1
            </RadioButton>

            <RadioButton name='radioGroup' onChange={() => setSelectedOption(2)} checked={selectedOption === 2} inline>
                Option 2
            </RadioButton>

            <RadioButton name='radioGroup' onChange={() => setSelectedOption(3)} checked={selectedOption === 3} inline>
                Option 3
            </RadioButton>
        </div>
    );
};
```

#### HTML (html)

```html
<div>
    <label class="radio radio-inline" tabindex="0">
        <input type="radio" class="" name="radioGroup" value="" checked="">
        <span class="radio-text">
            <span>Option 1</span>
        </span>
    </label>
    <label class="radio radio-inline" tabindex="0">
        <input type="radio" class="" name="radioGroup" value="">
        <span class="radio-text">
            <span>Option 2</span>
        </span>
    </label>
    <label class="radio radio-inline" tabindex="0">
        <input type="radio" class="" name="radioGroup" value="">
        <span class="radio-text">
            <span>Option 3</span>
        </span>
    </label>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| icon | string | — | Define any rioglyph icon like "rioglyph-truck". |
| iconLabelPosition | 'vertical' \| 'horizontal' | 'vertical' | The label position. Possible values are: 'horizontal' or 'vertical'. |
| iconSize | number | 16 | The icon Size in px. |
| label | string \| ReactNode | — | Defines the label text. |
| onClick | MouseEventHandler<{ value: string \| string[] \| number; }> | () => {} | Callback function that is invoked when the radio button is clicked. |
| onChange | ChangeEventHandler | () => {} | Callback function that is invoked when the radio button is toggled and the state should change (for controlled usage). |
| checked | boolean | — | Defines whether the radio is checked (for controlled usage). |
| defaultChecked | boolean | — | Defines whether the radio is initially checked (state can be changed on click). |
| disabled | boolean | false | Defines whether the checkbox is disabled. |
| className | string | — | Additional classes to be set on the input element. |
| inline | boolean | false | Defines whether the radio button is applying an inline style. Use this in combination with other radio buttons. |
| right | boolean | false | Displays the icon on the right side of the text. |
| custom | boolean | false | Allows for rendering a completely different layout with or without a radio tick. |
| name | string | — | Name to be given to the input element. |
| value | string | — | The value attribute is a string containing the radio button's value but it is never shown to the user. It serves a special purpose for inputs of type radio: when a form is submitted, only radio buttons which are currently checked are submitted, and the reported value is the value of the value attribute. If the value is not otherwise specified, it is the string on by default. This is useful when using native FormData when submitting a form to get the selected radio button value. |
| tabIndex | number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
| inputRef | Ref<HTMLInputElement> | — | Ref which is added to the input element. |

## RadioButton with FormData

### Example: Example 3

Please contact me via Email Phone Submit selection Selected value -

#### React (tsx)

```tsx
import { useState } from 'react';

import RadioButton from '@rio-cloud/rio-uikit/RadioButton';
import Button from '@rio-cloud/rio-uikit/Button';

export default () => {
    const [selectedValue, setSelectedValue] = useState('-');

    const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
        // avoid page reload on submit
        event.preventDefault();

        const formData = new FormData(event.target as HTMLFormElement);
        const entries = Object.fromEntries(formData.entries());
        console.log(entries);

        setSelectedValue(entries.contactOptions as string);
    };

    return (
        <div className='display-flex gap-20'>
            <form className='well border rounded bg-lightest width-300 max-width-300' onSubmit={handleSubmit}>
                <label>Please contact me via</label>
                <div>
                    <RadioButton name='contactOptions' value='email' inline>
                        Email
                    </RadioButton>
                    <RadioButton name='contactOptions' value='phone' inline>
                        Phone
                    </RadioButton>
                </div>
                <Button className='margin-top-20' type='submit'>
                    Submit selection
                </Button>
            </form>
            <div>
                <label>Selected value</label>
                <div>{selectedValue ?? 'Nothing selected'}</div>
            </div>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="display-flex gap-20">
    <form class="well border rounded bg-lightest width-300 max-width-300">
        <label>Please contact me via</label>
        <div>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="contactOptions" value="email">
                <span class="radio-text">
                    <span>Email</span>
                </span>
            </label>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="contactOptions" value="phone">
                <span class="radio-text">
                    <span>Phone</span>
                </span>
            </label>
        </div>
        <button type="submit" class="btn btn-default btn-component margin-top-20" tabindex="0">Submit selection</button>
    </form>
    <div>
        <label>Selected value</label>
        <div>-</div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| icon | string | — | Define any rioglyph icon like "rioglyph-truck". |
| iconLabelPosition | 'vertical' \| 'horizontal' | 'vertical' | The label position. Possible values are: 'horizontal' or 'vertical'. |
| iconSize | number | 16 | The icon Size in px. |
| label | string \| ReactNode | — | Defines the label text. |
| onClick | MouseEventHandler<{ value: string \| string[] \| number; }> | () => {} | Callback function that is invoked when the radio button is clicked. |
| onChange | ChangeEventHandler | () => {} | Callback function that is invoked when the radio button is toggled and the state should change (for controlled usage). |
| checked | boolean | — | Defines whether the radio is checked (for controlled usage). |
| defaultChecked | boolean | — | Defines whether the radio is initially checked (state can be changed on click). |
| disabled | boolean | false | Defines whether the checkbox is disabled. |
| className | string | — | Additional classes to be set on the input element. |
| inline | boolean | false | Defines whether the radio button is applying an inline style. Use this in combination with other radio buttons. |
| right | boolean | false | Displays the icon on the right side of the text. |
| custom | boolean | false | Allows for rendering a completely different layout with or without a radio tick. |
| name | string | — | Name to be given to the input element. |
| value | string | — | The value attribute is a string containing the radio button's value but it is never shown to the user. It serves a special purpose for inputs of type radio: when a form is submitted, only radio buttons which are currently checked are submitted, and the reported value is the value of the value attribute. If the value is not otherwise specified, it is the string on by default. This is useful when using native FormData when submitting a form to get the selected radio button value. |
| tabIndex | number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
| inputRef | Ref<HTMLInputElement> | — | Ref which is added to the input element. |

## Custom cards example

> Note: When using the custom option, make sure to wrap the children with the class name radio-text-wrapper. For using the radio tick, use an element with class name radio-text.

> Note

### Example: This option is a first option

Option 1
This option is a first option

Option 2
This option is a second option

Option 3
This option is a third option

#### React (tsx)

```tsx
import { useState } from 'react';

import RadioButton from '@rio-cloud/rio-uikit/RadioButton';

const getRadioClasses = (isSelected: boolean) =>
    `padding-15 border rounded ${isSelected ? 'border-color-highlight' : ''}`;

export default () => {
    const [selectedOption, setSelectedOption] = useState(1);

    return (
        <div className='display-flex gap-15'>
            <RadioButton
                name='radioBox'
                custom
                className={getRadioClasses(selectedOption === 1)}
                onChange={() => setSelectedOption(1)}
                checked={selectedOption === 1}
            >
                <div className='radio-text-wrapper display-flex'>
                    <div className='radio-text' />
                    <div className='margin-left-5 margin-right-5'>
                        <div className='text-medium'>Option 1</div>
                        <div className='text-color-dark'>This option is a first option</div>
                    </div>
                </div>
            </RadioButton>

            <RadioButton
                name='radioBox'
                custom
                className={getRadioClasses(selectedOption === 2)}
                onChange={() => setSelectedOption(2)}
                checked={selectedOption === 2}
            >
                <div className='radio-text-wrapper display-flex'>
                    <div className='radio-text' />
                    <div className='margin-left-5 margin-right-5'>
                        <div className='text-medium'>Option 2</div>
                        <div className='text-color-dark'>This option is a second option</div>
                    </div>
                </div>
            </RadioButton>

            <RadioButton
                name='radioBox'
                custom
                className={getRadioClasses(selectedOption === 3)}
                onChange={() => setSelectedOption(3)}
                checked={selectedOption === 3}
            >
                <div className='radio-text-wrapper display-flex'>
                    <div className='radio-text' />
                    <div className='margin-left-5 margin-right-5'>
                        <div className='text-medium'>Option 3</div>
                        <div className='text-color-dark'>This option is a third option</div>
                    </div>
                </div>
            </RadioButton>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="display-flex gap-15">
    <label class="radio padding-15 border rounded border-color-highlight" tabindex="0">
        <input type="radio" class="padding-15 border rounded border-color-highlight" name="radioBox" value="" checked="">
        <div class="radio-text-wrapper display-flex">
            <div class="radio-text">
            </div>
            <div class="margin-left-5 margin-right-5">
                <div class="text-medium">Option 1</div>
                <div class="text-color-dark">This option is a first option</div>
            </div>
        </div>
    </label>
    <label class="radio padding-15 border rounded " tabindex="0">
        <input type="radio" class="padding-15 border rounded " name="radioBox" value="">
        <div class="radio-text-wrapper display-flex">
            <div class="radio-text">
            </div>
            <div class="margin-left-5 margin-right-5">
                <div class="text-medium">Option 2</div>
                <div class="text-color-dark">This option is a second option</div>
            </div>
        </div>
    </label>
    <label class="radio padding-15 border rounded " tabindex="0">
        <input type="radio" class="padding-15 border rounded " name="radioBox" value="">
        <div class="radio-text-wrapper display-flex">
            <div class="radio-text">
            </div>
            <div class="margin-left-5 margin-right-5">
                <div class="text-medium">Option 3</div>
                <div class="text-color-dark">This option is a third option</div>
            </div>
        </div>
    </label>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| icon | string | — | Define any rioglyph icon like "rioglyph-truck". |
| iconLabelPosition | 'vertical' \| 'horizontal' | 'vertical' | The label position. Possible values are: 'horizontal' or 'vertical'. |
| iconSize | number | 16 | The icon Size in px. |
| label | string \| ReactNode | — | Defines the label text. |
| onClick | MouseEventHandler<{ value: string \| string[] \| number; }> | () => {} | Callback function that is invoked when the radio button is clicked. |
| onChange | ChangeEventHandler | () => {} | Callback function that is invoked when the radio button is toggled and the state should change (for controlled usage). |
| checked | boolean | — | Defines whether the radio is checked (for controlled usage). |
| defaultChecked | boolean | — | Defines whether the radio is initially checked (state can be changed on click). |
| disabled | boolean | false | Defines whether the checkbox is disabled. |
| className | string | — | Additional classes to be set on the input element. |
| inline | boolean | false | Defines whether the radio button is applying an inline style. Use this in combination with other radio buttons. |
| right | boolean | false | Displays the icon on the right side of the text. |
| custom | boolean | false | Allows for rendering a completely different layout with or without a radio tick. |
| name | string | — | Name to be given to the input element. |
| value | string | — | The value attribute is a string containing the radio button's value but it is never shown to the user. It serves a special purpose for inputs of type radio: when a form is submitted, only radio buttons which are currently checked are submitted, and the reported value is the value of the value attribute. If the value is not otherwise specified, it is the string on by default. This is useful when using native FormData when submitting a form to get the selected radio button value. |
| tabIndex | number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
| inputRef | Ref<HTMLInputElement> | — | Ref which is added to the input element. |

## Custom stacked example

### Example: This option is a first option

Option 1
This option is a first option

Option 2 (disabled)
This option is a second option

Option 3
This option is a third option

#### React (tsx)

```tsx
import { useState } from 'react';

import RadioButton from '@rio-cloud/rio-uikit/RadioButton';

const getSelectedClass = (isSelected: boolean) =>
    isSelected ? 'border-color-highlight bg-highlight-decent z-index-1' : '';

export default () => {
    const [selectedOption, setSelectedOption] = useState(1);

    return (
        <div className='display-flex flex-column'>
            <RadioButton
                name='stackedRadioBoxes'
                custom
                className={`padding-15 rounded-top-left rounded-top-right border ${getSelectedClass(
                    selectedOption === 1
                )}`}
                onChange={() => setSelectedOption(1)}
                checked={selectedOption === 1}
            >
                <div className='radio-text-wrapper display-flex'>
                    <span className='radio-text' />
                    <div className='margin-left-5 margin-right-5'>
                        <div className='text-medium'>Option 1</div>
                        <div className='text-color-dark'>This option is a first option</div>
                    </div>
                </div>
            </RadioButton>

            <RadioButton
                name='stackedRadioBoxes'
                custom
                className={`padding-15 margin-top--1 border ${getSelectedClass(selectedOption === 2)}`}
                onChange={() => setSelectedOption(2)}
                checked={selectedOption === 2}
                disabled
            >
                <div className='radio-text-wrapper display-flex'>
                    <span className='radio-text' />
                    <div className='margin-left-5 margin-right-5'>
                        <div className='text-medium'>Option 2 (disabled)</div>
                        <div className='text-color-dark'>This option is a second option</div>
                    </div>
                </div>
            </RadioButton>

            <RadioButton
                name='stackedRadioBoxes'
                custom
                className={`padding-15 margin-top--1 rounded-bottom-left rounded-bottom-right border ${getSelectedClass(
                    selectedOption === 3
                )}`}
                onChange={() => setSelectedOption(3)}
                checked={selectedOption === 3}
            >
                <div className='radio-text-wrapper display-flex'>
                    <span className='radio-text' />
                    <div className='margin-left-5 margin-right-5'>
                        <div className='text-medium'>Option 3</div>
                        <div className='text-color-dark'>This option is a third option</div>
                    </div>
                </div>
            </RadioButton>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="display-flex flex-column">
    <label class="radio padding-15 rounded-top-left rounded-top-right border border-color-highlight bg-highlight-decent z-index-1" tabindex="0">
        <input type="radio" class="padding-15 rounded-top-left rounded-top-right border border-color-highlight bg-highlight-decent z-index-1" name="stackedRadioBoxes" value="" checked="">
        <div class="radio-text-wrapper display-flex">
            <span class="radio-text">
            </span>
            <div class="margin-left-5 margin-right-5">
                <div class="text-medium">Option 1</div>
                <div class="text-color-dark">This option is a first option</div>
            </div>
        </div>
    </label>
    <label class="radio padding-15 margin-top--1 border " tabindex="0">
        <input type="radio" disabled="" class="padding-15 margin-top--1 border " name="stackedRadioBoxes" value="">
        <div class="radio-text-wrapper display-flex">
            <span class="radio-text">
            </span>
            <div class="margin-left-5 margin-right-5">
                <div class="text-medium">Option 2 (disabled)</div>
                <div class="text-color-dark">This option is a second option</div>
            </div>
        </div>
    </label>
    <label class="radio padding-15 margin-top--1 rounded-bottom-left rounded-bottom-right border " tabindex="0">
        <input type="radio" class="padding-15 margin-top--1 rounded-bottom-left rounded-bottom-right border " name="stackedRadioBoxes" value="">
        <div class="radio-text-wrapper display-flex">
            <span class="radio-text">
            </span>
            <div class="margin-left-5 margin-right-5">
                <div class="text-medium">Option 3</div>
                <div class="text-color-dark">This option is a third option</div>
            </div>
        </div>
    </label>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| icon | string | — | Define any rioglyph icon like "rioglyph-truck". |
| iconLabelPosition | 'vertical' \| 'horizontal' | 'vertical' | The label position. Possible values are: 'horizontal' or 'vertical'. |
| iconSize | number | 16 | The icon Size in px. |
| label | string \| ReactNode | — | Defines the label text. |
| onClick | MouseEventHandler<{ value: string \| string[] \| number; }> | () => {} | Callback function that is invoked when the radio button is clicked. |
| onChange | ChangeEventHandler | () => {} | Callback function that is invoked when the radio button is toggled and the state should change (for controlled usage). |
| checked | boolean | — | Defines whether the radio is checked (for controlled usage). |
| defaultChecked | boolean | — | Defines whether the radio is initially checked (state can be changed on click). |
| disabled | boolean | false | Defines whether the checkbox is disabled. |
| className | string | — | Additional classes to be set on the input element. |
| inline | boolean | false | Defines whether the radio button is applying an inline style. Use this in combination with other radio buttons. |
| right | boolean | false | Displays the icon on the right side of the text. |
| custom | boolean | false | Allows for rendering a completely different layout with or without a radio tick. |
| name | string | — | Name to be given to the input element. |
| value | string | — | The value attribute is a string containing the radio button's value but it is never shown to the user. It serves a special purpose for inputs of type radio: when a form is submitted, only radio buttons which are currently checked are submitted, and the reported value is the value of the value attribute. If the value is not otherwise specified, it is the string on by default. This is useful when using native FormData when submitting a form to get the selected radio button value. |
| tabIndex | number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
| inputRef | Ref<HTMLInputElement> | — | Ref which is added to the input element. |

## Custom list example

### Example: Example 6

Vehicle type
Truck

Trailer

Bus

Van

#### React (tsx)

```tsx
import { useState } from 'react';

import RadioButton from '@rio-cloud/rio-uikit/RadioButton';

export default () => {
    const [selectedOption, setSelectedOption] = useState(1);

    const radioButtonClassName =
        'padding-15 padding-left-10 padding-right-5 border border-bottom-only hover-bg-highlight-decent';

    return (
        <div className='display-flex flex-column width-200 margin-bottom-20'>
            <div className='text-medium'>Vehicle type</div>

            <RadioButton
                name='listRadioBoxes'
                custom
                className={radioButtonClassName}
                onChange={() => setSelectedOption(1)}
                checked={selectedOption === 1}
            >
                <div className='radio-text-wrapper display-flex justify-content-between'>
                    <div className='text-size-16 text-color-darker'>Truck</div>
                    <div className='radio-text' />
                </div>
            </RadioButton>

            <RadioButton
                name='listRadioBoxes'
                custom
                className={radioButtonClassName}
                onChange={() => setSelectedOption(2)}
                checked={selectedOption === 2}
            >
                <div className='radio-text-wrapper display-flex justify-content-between'>
                    <div className='text-size-16 text-color-darker'>Trailer</div>
                    <div className='radio-text' />
                </div>
            </RadioButton>

            <RadioButton
                name='listRadioBoxes'
                custom
                className={radioButtonClassName}
                onChange={() => setSelectedOption(3)}
                checked={selectedOption === 3}
            >
                <div className='radio-text-wrapper display-flex justify-content-between'>
                    <div className='text-size-16 text-color-darker'>Bus</div>
                    <div className='radio-text' />
                </div>
            </RadioButton>

            <RadioButton
                name='listRadioBoxes'
                custom
                className={radioButtonClassName}
                onChange={() => setSelectedOption(4)}
                checked={selectedOption === 4}
            >
                <div className='radio-text-wrapper display-flex justify-content-between'>
                    <div className='text-size-16 text-color-darker'>Van</div>
                    <div className='radio-text' />
                </div>
            </RadioButton>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="display-flex flex-column width-200 margin-bottom-20">
    <div class="text-medium">Vehicle type</div>
    <label class="radio padding-15 padding-left-10 padding-right-5 border border-bottom-only hover-bg-highlight-decent" tabindex="0">
        <input type="radio" class="padding-15 padding-left-10 padding-right-5 border border-bottom-only hover-bg-highlight-decent" name="listRadioBoxes" value="" checked="">
        <div class="radio-text-wrapper display-flex justify-content-between">
            <div class="text-size-16 text-color-darker">Truck</div>
            <div class="radio-text">
            </div>
        </div>
    </label>
    <label class="radio padding-15 padding-left-10 padding-right-5 border border-bottom-only hover-bg-highlight-decent" tabindex="0">
        <input type="radio" class="padding-15 padding-left-10 padding-right-5 border border-bottom-only hover-bg-highlight-decent" name="listRadioBoxes" value="">
        <div class="radio-text-wrapper display-flex justify-content-between">
            <div class="text-size-16 text-color-darker">Trailer</div>
            <div class="radio-text">
            </div>
        </div>
    </label>
    <label class="radio padding-15 padding-left-10 padding-right-5 border border-bottom-only hover-bg-highlight-decent" tabindex="0">
        <input type="radio" class="padding-15 padding-left-10 padding-right-5 border border-bottom-only hover-bg-highlight-decent" name="listRadioBoxes" value="">
        <div class="radio-text-wrapper display-flex justify-content-between">
            <div class="text-size-16 text-color-darker">Bus</div>
            <div class="radio-text">
            </div>
        </div>
    </label>
    <label class="radio padding-15 padding-left-10 padding-right-5 border border-bottom-only hover-bg-highlight-decent" tabindex="0">
        <input type="radio" class="padding-15 padding-left-10 padding-right-5 border border-bottom-only hover-bg-highlight-decent" name="listRadioBoxes" value="">
        <div class="radio-text-wrapper display-flex justify-content-between">
            <div class="text-size-16 text-color-darker">Van</div>
            <div class="radio-text">
            </div>
        </div>
    </label>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| icon | string | — | Define any rioglyph icon like "rioglyph-truck". |
| iconLabelPosition | 'vertical' \| 'horizontal' | 'vertical' | The label position. Possible values are: 'horizontal' or 'vertical'. |
| iconSize | number | 16 | The icon Size in px. |
| label | string \| ReactNode | — | Defines the label text. |
| onClick | MouseEventHandler<{ value: string \| string[] \| number; }> | () => {} | Callback function that is invoked when the radio button is clicked. |
| onChange | ChangeEventHandler | () => {} | Callback function that is invoked when the radio button is toggled and the state should change (for controlled usage). |
| checked | boolean | — | Defines whether the radio is checked (for controlled usage). |
| defaultChecked | boolean | — | Defines whether the radio is initially checked (state can be changed on click). |
| disabled | boolean | false | Defines whether the checkbox is disabled. |
| className | string | — | Additional classes to be set on the input element. |
| inline | boolean | false | Defines whether the radio button is applying an inline style. Use this in combination with other radio buttons. |
| right | boolean | false | Displays the icon on the right side of the text. |
| custom | boolean | false | Allows for rendering a completely different layout with or without a radio tick. |
| name | string | — | Name to be given to the input element. |
| value | string | — | The value attribute is a string containing the radio button's value but it is never shown to the user. It serves a special purpose for inputs of type radio: when a form is submitted, only radio buttons which are currently checked are submitted, and the reported value is the value of the value attribute. If the value is not otherwise specified, it is the string on by default. This is useful when using native FormData when submitting a form to get the selected radio button value. |
| tabIndex | number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
| inputRef | Ref<HTMLInputElement> | — | Ref which is added to the input element. |

## Custom example without the tick

### Example: Example 7

4 GB
8 GB
16 GB
32 GB
64 GB

#### React (tsx)

```tsx
import { useState } from 'react';

import RadioButton from '@rio-cloud/rio-uikit/RadioButton';

const getSelectedClass = (isSelected: boolean) =>
    isSelected ? 'border-color-highlight bg-highlight text-color-white' : 'hover-bg-highlight-decent';

export default () => {
    const [selectedOption, setSelectedOption] = useState(1);

    return (
        <div className='display-flex gap-15 margin-bottom-20'>
            <RadioButton
                name='noTickRadioBoxes'
                custom
                className={`width-80 padding-15 border rounded ${getSelectedClass(selectedOption === 1)}`}
                onChange={() => setSelectedOption(1)}
                checked={selectedOption === 1}
            >
                <div className='text-center text-size-16 text-medium'>4 GB</div>
            </RadioButton>

            <RadioButton
                name='noTickRadioBoxes'
                custom
                className={`width-80 padding-15 border rounded ${getSelectedClass(selectedOption === 2)}`}
                onChange={() => setSelectedOption(2)}
                checked={selectedOption === 2}
            >
                <div className='text-center text-size-16 text-medium'>8 GB</div>
            </RadioButton>

            <RadioButton
                name='noTickRadioBoxes'
                custom
                className={`width-80 padding-15 border rounded ${getSelectedClass(selectedOption === 3)}`}
                onChange={() => setSelectedOption(3)}
                checked={selectedOption === 3}
            >
                <div className='text-center text-size-16 text-medium'>16 GB</div>
            </RadioButton>

            <RadioButton
                name='noTickRadioBoxes'
                custom
                className={`width-80 padding-15 border rounded ${getSelectedClass(selectedOption === 4)}`}
                onChange={() => setSelectedOption(4)}
                checked={selectedOption === 4}
            >
                <div className='text-center text-size-16 text-medium'>32 GB</div>
            </RadioButton>

            <RadioButton
                name='noTickRadioBoxes'
                custom
                disabled
                className='width-80 padding-15 border rounded cursor-not-allowed'
            >
                <div className='text-center text-size-16 text-medium text-color-light'>64 GB</div>
            </RadioButton>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="display-flex gap-15 margin-bottom-20">
    <label class="radio width-80 padding-15 border rounded border-color-highlight bg-highlight text-color-white" tabindex="0">
        <input type="radio" class="width-80 padding-15 border rounded border-color-highlight bg-highlight text-color-white" name="noTickRadioBoxes" value="" checked="">
        <div class="text-center text-size-16 text-medium">4 GB</div>
    </label>
    <label class="radio width-80 padding-15 border rounded hover-bg-highlight-decent" tabindex="0">
        <input type="radio" class="width-80 padding-15 border rounded hover-bg-highlight-decent" name="noTickRadioBoxes" value="">
        <div class="text-center text-size-16 text-medium">8 GB</div>
    </label>
    <label class="radio width-80 padding-15 border rounded hover-bg-highlight-decent" tabindex="0">
        <input type="radio" class="width-80 padding-15 border rounded hover-bg-highlight-decent" name="noTickRadioBoxes" value="">
        <div class="text-center text-size-16 text-medium">16 GB</div>
    </label>
    <label class="radio width-80 padding-15 border rounded hover-bg-highlight-decent" tabindex="0">
        <input type="radio" class="width-80 padding-15 border rounded hover-bg-highlight-decent" name="noTickRadioBoxes" value="">
        <div class="text-center text-size-16 text-medium">32 GB</div>
    </label>
    <label class="radio width-80 padding-15 border rounded cursor-not-allowed" tabindex="0">
        <input type="radio" disabled="" class="width-80 padding-15 border rounded cursor-not-allowed" name="noTickRadioBoxes" value="">
        <div class="text-center text-size-16 text-medium text-color-light">64 GB</div>
    </label>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| icon | string | — | Define any rioglyph icon like "rioglyph-truck". |
| iconLabelPosition | 'vertical' \| 'horizontal' | 'vertical' | The label position. Possible values are: 'horizontal' or 'vertical'. |
| iconSize | number | 16 | The icon Size in px. |
| label | string \| ReactNode | — | Defines the label text. |
| onClick | MouseEventHandler<{ value: string \| string[] \| number; }> | () => {} | Callback function that is invoked when the radio button is clicked. |
| onChange | ChangeEventHandler | () => {} | Callback function that is invoked when the radio button is toggled and the state should change (for controlled usage). |
| checked | boolean | — | Defines whether the radio is checked (for controlled usage). |
| defaultChecked | boolean | — | Defines whether the radio is initially checked (state can be changed on click). |
| disabled | boolean | false | Defines whether the checkbox is disabled. |
| className | string | — | Additional classes to be set on the input element. |
| inline | boolean | false | Defines whether the radio button is applying an inline style. Use this in combination with other radio buttons. |
| right | boolean | false | Displays the icon on the right side of the text. |
| custom | boolean | false | Allows for rendering a completely different layout with or without a radio tick. |
| name | string | — | Name to be given to the input element. |
| value | string | — | The value attribute is a string containing the radio button's value but it is never shown to the user. It serves a special purpose for inputs of type radio: when a form is submitted, only radio buttons which are currently checked are submitted, and the reported value is the value of the value attribute. If the value is not otherwise specified, it is the string on by default. This is useful when using native FormData when submitting a form to get the selected radio button value. |
| tabIndex | number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
| inputRef | Ref<HTMLInputElement> | — | Ref which is added to the input element. |

## RadioButton with custom icon

### Example:

Truck Bus Trailer

Truck Bus Van Trailer

6 Month

12 Month
Save 15%

24 Month
Save 25%

#### React (tsx)

```tsx
import RadioButton from '@rio-cloud/rio-uikit/RadioButton';

export default () => (
    <div>
        <div>
            <RadioButton
                name='radiosIconInline'
                id='IconInlineTruck'
                inline
                icon='rioglyph-truck'
                iconLabelPosition='horizontal'
            >
                <span>Truck</span>
            </RadioButton>

            <RadioButton
                name='radiosIconInline'
                id='IconInlineBus'
                inline
                icon='rioglyph-bus'
                iconLabelPosition='horizontal'
            >
                <span>Bus</span>
            </RadioButton>

            <RadioButton
                name='radiosIconInline'
                id='IconInlineTrailer'
                inline
                icon='rioglyph-trailer'
                iconLabelPosition='horizontal'
            >
                <span>Trailer</span>
            </RadioButton>
        </div>

        <hr />

        <div>
            <RadioButton name='radiosIcon' id='IconTruck' inline icon='rioglyph-truck' iconSize={75}>
                <span className='text-size-16 margin-top-10'>Truck</span>
            </RadioButton>

            <RadioButton name='radiosIcon' id='IconBus' inline icon='rioglyph-bus' iconSize={75}>
                <span className='text-size-16 margin-top-10'>Bus</span>
            </RadioButton>

            <RadioButton name='radiosIcon' id='IconBus' inline icon='rioglyph-van' iconSize={75}>
                <span className='text-size-16 margin-top-10'>Van</span>
            </RadioButton>

            <RadioButton name='radiosIcon' id='IconTrailer' inline icon='rioglyph-trailer' iconSize={75}>
                <span className='text-size-16 margin-top-10'>Trailer</span>
            </RadioButton>
        </div>

        <hr />

        <div className='padding-25 max-width-400'>
            <div className='display-flex content-space-between column-gap-25 margin-bottom-25'>
                <div className='flex-1-1 text-center line-height-125rel width-33pct margin-left-10 margin-right-10'>
                    <div className='text-size-16 text-medium margin-bottom-5 white-space-nowrap'>6 Month</div>
                    <div className='text-size-12 text-color-dark' />
                </div>

                <div className='flex-1-1 text-center line-height-125rel width-33pct margin-left-10 margin-right-10'>
                    <div className='text-size-16 text-medium margin-bottom-5 white-space-nowrap'>12 Month</div>
                    <div className='text-size-12 text-color-dark'>Save 15%</div>
                </div>

                <div className='flex-1-1 text-center line-height-125rel width-33pct margin-left-10 margin-right-10'>
                    <div className='text-size-16 text-medium margin-bottom-5 white-space-nowrap'>24 Month</div>
                    <div className='text-size-12 text-color-dark'>Save 25%</div>
                </div>
            </div>

            <div
                className={
                    'display-flex justify-content-between column-gap-25 bg-white rounded-circle ' +
                    'padding-3 border-style-solid border-width-1 border-color-light'
                }
            >
                <RadioButton
                    name='radiosContracts'
                    id='Periode1'
                    inline
                    icon='rioglyph-start'
                    iconSize={30}
                    className='padding-0 margin-0 width-33pct'
                    defaultChecked
                />

                <RadioButton
                    name='radiosContracts'
                    id='Periode2'
                    inline
                    icon='rioglyph-stopover'
                    iconSize={30}
                    className='padding-0 margin-0 width-33pct'
                />

                <RadioButton
                    name='radiosContracts'
                    id='Periode3'
                    inline
                    icon='rioglyph-stopover'
                    iconSize={30}
                    className='padding-0 margin-0 width-33pct'
                />
            </div>
        </div>
    </div>
);
```

#### HTML (html)

```html
<div>
    <div>
        <label id="IconInlineTruck" class="radio radio-inline" tabindex="0">
            <input type="radio" class="" name="radiosIconInline" value="">
            <span class="radio-icon label-horizontal">
                <span class="rioglyph rioglyph-truck" style="width: 16px; height: 16px; font-size: 16px; line-height: 16px;">
                </span>
                <span class="radio-label">
                    <span>Truck</span>
                </span>
            </span>
        </label>
        <label id="IconInlineBus" class="radio radio-inline" tabindex="0">
            <input type="radio" class="" name="radiosIconInline" value="">
            <span class="radio-icon label-horizontal">
                <span class="rioglyph rioglyph-bus" style="width: 16px; height: 16px; font-size: 16px; line-height: 16px;">
                </span>
                <span class="radio-label">
                    <span>Bus</span>
                </span>
            </span>
        </label>
        <label id="IconInlineTrailer" class="radio radio-inline" tabindex="0">
            <input type="radio" class="" name="radiosIconInline" value="">
            <span class="radio-icon label-horizontal">
                <span class="rioglyph rioglyph-trailer" style="width: 16px; height: 16px; font-size: 16px; line-height: 16px;">
                </span>
                <span class="radio-label">
                    <span>Trailer</span>
                </span>
            </span>
        </label>
    </div>
    <hr>
    <div>
        <label id="IconTruck" class="radio radio-inline" tabindex="0">
            <input type="radio" class="" name="radiosIcon" value="">
            <span class="radio-icon label-vertical">
                <span class="rioglyph rioglyph-truck" style="width: 75px; height: 75px; font-size: 75px; line-height: 75px;">
                </span>
                <span class="radio-label">
                    <span class="text-size-16 margin-top-10">Truck</span>
                </span>
            </span>
        </label>
        <label id="IconBus" class="radio radio-inline" tabindex="0">
            <input type="radio" class="" name="radiosIcon" value="">
            <span class="radio-icon label-vertical">
                <span class="rioglyph rioglyph-bus" style="width: 75px; height: 75px; font-size: 75px; line-height: 75px;">
                </span>
                <span class="radio-label">
                    <span class="text-size-16 margin-top-10">Bus</span>
                </span>
            </span>
        </label>
        <label id="IconBus" class="radio radio-inline" tabindex="0">
            <input type="radio" class="" name="radiosIcon" value="">
            <span class="radio-icon label-vertical">
                <span class="rioglyph rioglyph-van" style="width: 75px; height: 75px; font-size: 75px; line-height: 75px;">
                </span>
                <span class="radio-label">
                    <span class="text-size-16 margin-top-10">Van</span>
                </span>
            </span>
        </label>
        <label id="IconTrailer" class="radio radio-inline" tabindex="0">
            <input type="radio" class="" name="radiosIcon" value="">
            <span class="radio-icon label-vertical">
                <span class="rioglyph rioglyph-trailer" style="width: 75px; height: 75px; font-size: 75px; line-height: 75px;">
                </span>
                <span class="radio-label">
                    <span class="text-size-16 margin-top-10">Trailer</span>
                </span>
            </span>
        </label>
    </div>
    <hr>
    <div class="padding-25 max-width-400">
        <div class="display-flex content-space-between column-gap-25 margin-bottom-25">
            <div class="flex-1-1 text-center line-height-125rel width-33pct margin-left-10 margin-right-10">
                <div class="text-size-16 text-medium margin-bottom-5 white-space-nowrap">6 Month</div>
                <div class="text-size-12 text-color-dark">
                </div>
            </div>
            <div class="flex-1-1 text-center line-height-125rel width-33pct margin-left-10 margin-right-10">
                <div class="text-size-16 text-medium margin-bottom-5 white-space-nowrap">12 Month</div>
                <div class="text-size-12 text-color-dark">Save 15%</div>
            </div>
            <div class="flex-1-1 text-center line-height-125rel width-33pct margin-left-10 margin-right-10">
                <div class="text-size-16 text-medium margin-bottom-5 white-space-nowrap">24 Month</div>
                <div class="text-size-12 text-color-dark">Save 25%</div>
            </div>
        </div>
        <div class="display-flex justify-content-between column-gap-25 bg-white rounded-circle padding-3 border-style-solid border-width-1 border-color-light">
            <label id="Periode1" class="radio radio-inline padding-0 margin-0 width-33pct" tabindex="0">
                <input type="radio" class="padding-0 margin-0 width-33pct" name="radiosContracts" value="" checked="">
                <span class="radio-icon label-vertical">
                    <span class="rioglyph rioglyph-start" style="width: 30px; height: 30px; font-size: 30px; line-height: 30px;">
                    </span>
                    <span class="radio-label">
                    </span>
                </span>
            </label>
            <label id="Periode2" class="radio radio-inline padding-0 margin-0 width-33pct" tabindex="0">
                <input type="radio" class="padding-0 margin-0 width-33pct" name="radiosContracts" value="">
                <span class="radio-icon label-vertical">
                    <span class="rioglyph rioglyph-stopover" style="width: 30px; height: 30px; font-size: 30px; line-height: 30px;">
                    </span>
                    <span class="radio-label">
                    </span>
                </span>
            </label>
            <label id="Periode3" class="radio radio-inline padding-0 margin-0 width-33pct" tabindex="0">
                <input type="radio" class="padding-0 margin-0 width-33pct" name="radiosContracts" value="">
                <span class="radio-icon label-vertical">
                    <span class="rioglyph rioglyph-stopover" style="width: 30px; height: 30px; font-size: 30px; line-height: 30px;">
                    </span>
                    <span class="radio-label">
                    </span>
                </span>
            </label>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| icon | string | — | Define any rioglyph icon like "rioglyph-truck". |
| iconLabelPosition | 'vertical' \| 'horizontal' | 'vertical' | The label position. Possible values are: 'horizontal' or 'vertical'. |
| iconSize | number | 16 | The icon Size in px. |
| label | string \| ReactNode | — | Defines the label text. |
| onClick | MouseEventHandler<{ value: string \| string[] \| number; }> | () => {} | Callback function that is invoked when the radio button is clicked. |
| onChange | ChangeEventHandler | () => {} | Callback function that is invoked when the radio button is toggled and the state should change (for controlled usage). |
| checked | boolean | — | Defines whether the radio is checked (for controlled usage). |
| defaultChecked | boolean | — | Defines whether the radio is initially checked (state can be changed on click). |
| disabled | boolean | false | Defines whether the checkbox is disabled. |
| className | string | — | Additional classes to be set on the input element. |
| inline | boolean | false | Defines whether the radio button is applying an inline style. Use this in combination with other radio buttons. |
| right | boolean | false | Displays the icon on the right side of the text. |
| custom | boolean | false | Allows for rendering a completely different layout with or without a radio tick. |
| name | string | — | Name to be given to the input element. |
| value | string | — | The value attribute is a string containing the radio button's value but it is never shown to the user. It serves a special purpose for inputs of type radio: when a form is submitted, only radio buttons which are currently checked are submitted, and the reported value is the value of the value attribute. If the value is not otherwise specified, it is the string on by default. This is useful when using native FormData when submitting a form to get the selected radio button value. |
| tabIndex | number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
| inputRef | Ref<HTMLInputElement> | — | Ref which is added to the input element. |