@rio-cloud/uikit-mcp 1.0.1 → 1.1.1

package/dist/docs/components/radiobutton.md

@@ -0,0 +1,1271 @@
+# RadioButton
+
+*Category:* Components
+*Section:* Interaction
+*Source:* https://uikit.developers.rio.cloud/#components/radiobutton
+*Captured:* 2025-12-12T14:20:22.899Z
+
+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: Example 1
+
+Option one is selected by default
+Option two can be something else and selecting it will deselect option one
+Option three is disabled
+123
+Km
+Miles
+
+#### Summary
+
+Option one is selected by default
+Option two can be something else and selecting it will deselect option one
+Option three is disabled
+123
+Km
+Miles
+
+#### React (tsx)
+
+```tsx
+import RadioButton from '@rio-cloud/rio-uikit/RadioButton';
+
+export default () => (
+    <div>
+        <div>
+            <RadioButton name='radios' id='optionsRadios1' value='option1' defaultChecked>
+                Option one is selected by default
+            </RadioButton>
+        </div>
+        <div>
+            <RadioButton name='radios' id='optionsRadios2' value='option2'>
+                Option two can be something else and selecting it will deselect option one
+            </RadioButton>
+        </div>
+        <div>
+            <RadioButton name='radios' id='optionsRadios3' value='option3' disabled>
+                Option three is disabled
+            </RadioButton>
+        </div>
+
+        <hr />
+
+        <div>
+            <RadioButton name='radiosInline' id='1' inline>
+                1
+            </RadioButton>
+            <RadioButton name='radiosInline' id='2' inline>
+                2
+            </RadioButton>
+            <RadioButton name='radiosInline' id='3' inline>
+                3
+            </RadioButton>
+        </div>
+
+        <hr />
+
+        <div>
+            <RadioButton name='radiosRight' id='km' right inline>
+                Km
+            </RadioButton>
+        </div>
+        <div>
+            <RadioButton name='radiosRight' id='miles' right inline>
+                Miles
+            </RadioButton>
+        </div>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div>
+        <label id="optionsRadios1" 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 id="optionsRadios2" 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 id="optionsRadios3" 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 id="1" class="radio radio-inline" tabindex="0">
+            <input type="radio" class="" name="radiosInline" value="">
+            <span class="radio-text">
+                <span>1</span>
+            </span>
+        </label>
+        <label id="2" class="radio radio-inline" tabindex="0">
+            <input type="radio" class="" name="radiosInline" value="">
+            <span class="radio-text">
+                <span>2</span>
+            </span>
+        </label>
+        <label id="3" class="radio radio-inline" tabindex="0">
+            <input type="radio" class="" name="radiosInline" value="">
+            <span class="radio-text">
+                <span>3</span>
+            </span>
+        </label>
+    </div>
+    <hr>
+    <div>
+        <label id="km" class="radio radio-inline" tabindex="0">
+            <input type="radio" class="icon-right" name="radiosRight" value="">
+            <span class="radio-text">
+                <span>Km</span>
+            </span>
+        </label>
+    </div>
+    <div>
+        <label id="miles" class="radio radio-inline" tabindex="0">
+            <input type="radio" class="icon-right" name="radiosRight" value="">
+            <span class="radio-text">
+                <span>Miles</span>
+            </span>
+        </label>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| label | String / Node | — | Defines the label text. |
+| defaultChecked | Boolean | — | Defines whether the radio is initially checked or not (state can be changed on click). |
+| checked | Boolean | — | Defines whether the radio is checked or not (for controlled usage). |
+| disabled | Boolean | false | Defines whether the checkbox is disabled or not. |
+| inline | Boolean | false | Defines whether the radio button is applying an inline style. Use this in combinationwith 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. |
+| 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 | — | Ref which is added to the input element. |
+| onClick | Function | () => {} | Callback function that is invoked when the radio button is clicked. |
+| onChange | Function | () => {} | Callback function that is invoked when the radio button is clicked and the state changes (for controlled usage). |
+| className | String | — | Additional classes to be set on the input element. |
+| children | any | — | Any element to be rendered inside the text element. |
+| icon | String | — | Define any rioglyph icon like "rioglyph-truck". |
+| iconSize | Number | — | The icon Size in px. |
+| name | String | — | Name to be given to the input element. |
+| iconLabelPosition | String | — | The label position. Possible values are: "horizontal" or "vertical". |
+
+## Controlled example
+
+### Example: Example 2
+
+Option 1Option 2Option 3
+
+#### Summary
+
+Option 1Option 2Option 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 |
+| --- | --- | --- | --- |
+| label | String / Node | — | Defines the label text. |
+| defaultChecked | Boolean | — | Defines whether the radio is initially checked or not (state can be changed on click). |
+| checked | Boolean | — | Defines whether the radio is checked or not (for controlled usage). |
+| disabled | Boolean | false | Defines whether the checkbox is disabled or not. |
+| inline | Boolean | false | Defines whether the radio button is applying an inline style. Use this in combinationwith 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. |
+| 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 | — | Ref which is added to the input element. |
+| onClick | Function | () => {} | Callback function that is invoked when the radio button is clicked. |
+| onChange | Function | () => {} | Callback function that is invoked when the radio button is clicked and the state changes (for controlled usage). |
+| className | String | — | Additional classes to be set on the input element. |
+| children | any | — | Any element to be rendered inside the text element. |
+| icon | String | — | Define any rioglyph icon like "rioglyph-truck". |
+| iconSize | Number | — | The icon Size in px. |
+| name | String | — | Name to be given to the input element. |
+| iconLabelPosition | String | — | The label position. Possible values are: "horizontal" or "vertical". |
+
+## RadioButton with FormData
+
+### Example: Example 3
+
+Please contact me viaEmailPhone
+Submit selectionSelected value-
+
+#### Summary
+
+Please contact me viaEmailPhone
+Submit selectionSelected 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 |
+| --- | --- | --- | --- |
+| label | String / Node | — | Defines the label text. |
+| defaultChecked | Boolean | — | Defines whether the radio is initially checked or not (state can be changed on click). |
+| checked | Boolean | — | Defines whether the radio is checked or not (for controlled usage). |
+| disabled | Boolean | false | Defines whether the checkbox is disabled or not. |
+| inline | Boolean | false | Defines whether the radio button is applying an inline style. Use this in combinationwith 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. |
+| 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 | — | Ref which is added to the input element. |
+| onClick | Function | () => {} | Callback function that is invoked when the radio button is clicked. |
+| onChange | Function | () => {} | Callback function that is invoked when the radio button is clicked and the state changes (for controlled usage). |
+| className | String | — | Additional classes to be set on the input element. |
+| children | any | — | Any element to be rendered inside the text element. |
+| icon | String | — | Define any rioglyph icon like "rioglyph-truck". |
+| iconSize | Number | — | The icon Size in px. |
+| name | String | — | Name to be given to the input element. |
+| iconLabelPosition | String | — | The label position. Possible values are: "horizontal" or "vertical". |
+
+## 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.
+
+### 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
+
+#### Summary
+
+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 |
+| --- | --- | --- | --- |
+| label | String / Node | — | Defines the label text. |
+| defaultChecked | Boolean | — | Defines whether the radio is initially checked or not (state can be changed on click). |
+| checked | Boolean | — | Defines whether the radio is checked or not (for controlled usage). |
+| disabled | Boolean | false | Defines whether the checkbox is disabled or not. |
+| inline | Boolean | false | Defines whether the radio button is applying an inline style. Use this in combinationwith 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. |
+| 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 | — | Ref which is added to the input element. |
+| onClick | Function | () => {} | Callback function that is invoked when the radio button is clicked. |
+| onChange | Function | () => {} | Callback function that is invoked when the radio button is clicked and the state changes (for controlled usage). |
+| className | String | — | Additional classes to be set on the input element. |
+| children | any | — | Any element to be rendered inside the text element. |
+| icon | String | — | Define any rioglyph icon like "rioglyph-truck". |
+| iconSize | Number | — | The icon Size in px. |
+| name | String | — | Name to be given to the input element. |
+| iconLabelPosition | String | — | The label position. Possible values are: "horizontal" or "vertical". |
+
+## 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
+
+#### Summary
+
+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 |
+| --- | --- | --- | --- |
+| label | String / Node | — | Defines the label text. |
+| defaultChecked | Boolean | — | Defines whether the radio is initially checked or not (state can be changed on click). |
+| checked | Boolean | — | Defines whether the radio is checked or not (for controlled usage). |
+| disabled | Boolean | false | Defines whether the checkbox is disabled or not. |
+| inline | Boolean | false | Defines whether the radio button is applying an inline style. Use this in combinationwith 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. |
+| 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 | — | Ref which is added to the input element. |
+| onClick | Function | () => {} | Callback function that is invoked when the radio button is clicked. |
+| onChange | Function | () => {} | Callback function that is invoked when the radio button is clicked and the state changes (for controlled usage). |
+| className | String | — | Additional classes to be set on the input element. |
+| children | any | — | Any element to be rendered inside the text element. |
+| icon | String | — | Define any rioglyph icon like "rioglyph-truck". |
+| iconSize | Number | — | The icon Size in px. |
+| name | String | — | Name to be given to the input element. |
+| iconLabelPosition | String | — | The label position. Possible values are: "horizontal" or "vertical". |
+
+## Custom list example
+
+### Example: Example 6
+
+Vehicle type
+Truck
+
+Trailer
+
+Bus
+
+Van
+
+#### Summary
+
+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 |
+| --- | --- | --- | --- |
+| label | String / Node | — | Defines the label text. |
+| defaultChecked | Boolean | — | Defines whether the radio is initially checked or not (state can be changed on click). |
+| checked | Boolean | — | Defines whether the radio is checked or not (for controlled usage). |
+| disabled | Boolean | false | Defines whether the checkbox is disabled or not. |
+| inline | Boolean | false | Defines whether the radio button is applying an inline style. Use this in combinationwith 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. |
+| 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 | — | Ref which is added to the input element. |
+| onClick | Function | () => {} | Callback function that is invoked when the radio button is clicked. |
+| onChange | Function | () => {} | Callback function that is invoked when the radio button is clicked and the state changes (for controlled usage). |
+| className | String | — | Additional classes to be set on the input element. |
+| children | any | — | Any element to be rendered inside the text element. |
+| icon | String | — | Define any rioglyph icon like "rioglyph-truck". |
+| iconSize | Number | — | The icon Size in px. |
+| name | String | — | Name to be given to the input element. |
+| iconLabelPosition | String | — | The label position. Possible values are: "horizontal" or "vertical". |
+
+## Custom example without the tick
+
+### Example: Example 7
+
+4 GB
+8 GB
+16 GB
+32 GB
+64 GB
+
+#### Summary
+
+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 |
+| --- | --- | --- | --- |
+| label | String / Node | — | Defines the label text. |
+| defaultChecked | Boolean | — | Defines whether the radio is initially checked or not (state can be changed on click). |
+| checked | Boolean | — | Defines whether the radio is checked or not (for controlled usage). |
+| disabled | Boolean | false | Defines whether the checkbox is disabled or not. |
+| inline | Boolean | false | Defines whether the radio button is applying an inline style. Use this in combinationwith 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. |
+| 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 | — | Ref which is added to the input element. |
+| onClick | Function | () => {} | Callback function that is invoked when the radio button is clicked. |
+| onChange | Function | () => {} | Callback function that is invoked when the radio button is clicked and the state changes (for controlled usage). |
+| className | String | — | Additional classes to be set on the input element. |
+| children | any | — | Any element to be rendered inside the text element. |
+| icon | String | — | Define any rioglyph icon like "rioglyph-truck". |
+| iconSize | Number | — | The icon Size in px. |
+| name | String | — | Name to be given to the input element. |
+| iconLabelPosition | String | — | The label position. Possible values are: "horizontal" or "vertical". |
+
+## RadioButton with custom icon
+
+### Example:
+
+TruckBusTrailer
+TruckBusVanTrailer
+6 Month
+
+12 Month
+Save 15%
+
+24 Month
+Save 25%
+
+#### Summary
+
+TruckBusTrailer
+TruckBusVanTrailer
+6 Month
+
+12 Month
+Save 15%
+
+24 Month
+Save 25%
+
+#### React (tsx)
+
+```tsx
+import RadioButton from '@rio-cloud/rio-uikit/RadioButton';
+
+export default () => {
+    return (
+        <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 |
+| --- | --- | --- | --- |
+| label | String / Node | — | Defines the label text. |
+| defaultChecked | Boolean | — | Defines whether the radio is initially checked or not (state can be changed on click). |
+| checked | Boolean | — | Defines whether the radio is checked or not (for controlled usage). |
+| disabled | Boolean | false | Defines whether the checkbox is disabled or not. |
+| inline | Boolean | false | Defines whether the radio button is applying an inline style. Use this in combinationwith 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. |
+| 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 | — | Ref which is added to the input element. |
+| onClick | Function | () => {} | Callback function that is invoked when the radio button is clicked. |
+| onChange | Function | () => {} | Callback function that is invoked when the radio button is clicked and the state changes (for controlled usage). |
+| className | String | — | Additional classes to be set on the input element. |
+| children | any | — | Any element to be rendered inside the text element. |
+| icon | String | — | Define any rioglyph icon like "rioglyph-truck". |
+| iconSize | Number | — | The icon Size in px. |
+| name | String | — | Name to be given to the input element. |
+| iconLabelPosition | String | — | The label position. Possible values are: "horizontal" or "vertical". |