@rio-cloud/uikit-mcp 1.1.3 → 1.1.5

package/dist/docs/components/radiobutton.md

@@ -3,13 +3,13 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#components/radiobutton
-*Captured:* 2026-01-07T12:11:20.146Z
+*Captured:* 2026-02-03T14:04:20.757Z
 
 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
+### 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
@@ -17,6 +17,7 @@ Option three is disabled
 123
 Km
 Miles
+Last selected option: nothing selected yet
 
 #### Summary
 
@@ -26,58 +27,73 @@ Option three is disabled
 123
 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 () => (
-    <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>
+export default () => {
+    const [lastSelectedOption, setLastSelectedOption] = useState('');
 
-        <hr />
+    const handleClick = (event: React.MouseEvent<HTMLInputElement>) => {
+        console.log(event.currentTarget.value);
+        setLastSelectedOption(event.currentTarget.value);
+    };
 
+    return (
         <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>
+            <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 />
+            <hr />
 
-        <div>
-            <RadioButton name='radiosRight' id='km' right inline>
-                Km
-            </RadioButton>
-        </div>
-        <div>
-            <RadioButton name='radiosRight' id='miles' right inline>
-                Miles
-            </RadioButton>
+            <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>
-    </div>
-);
+    );
+};
 ```
 
 #### HTML (html)
@@ -85,7 +101,7 @@ export default () => (
 ```html
 <div>
     <div>
-        <label id="optionsRadios1" class="radio" tabindex="0">
+        <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>
@@ -93,7 +109,7 @@ export default () => (
         </label>
     </div>
     <div>
-        <label id="optionsRadios2" class="radio" tabindex="0">
+        <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>
@@ -101,7 +117,7 @@ export default () => (
         </label>
     </div>
     <div>
-        <label id="optionsRadios3" class="radio" tabindex="0">
+        <label class="radio" tabindex="0">
             <input type="radio" disabled="" class="" name="radios" value="option3">
             <span class="radio-text">
                 <span>Option three is disabled</span>
@@ -110,20 +126,20 @@ export default () => (
     </div>
     <hr>
     <div>
-        <label id="1" class="radio radio-inline" tabindex="0">
-            <input type="radio" class="" name="radiosInline" value="">
+        <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 id="2" class="radio radio-inline" tabindex="0">
-            <input type="radio" class="" name="radiosInline" value="">
+        <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 id="3" class="radio radio-inline" tabindex="0">
-            <input type="radio" class="" name="radiosInline" value="">
+        <label class="radio radio-inline" tabindex="0">
+            <input type="radio" class="" name="radiosInline" value="3">
             <span class="radio-text">
                 <span>3</span>
             </span>
@@ -131,21 +147,23 @@ export default () => (
     </div>
     <hr>
     <div>
-        <label id="km" class="radio radio-inline" tabindex="0">
-            <input type="radio" class="icon-right" name="radiosRight" value="">
+        <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 id="miles" class="radio radio-inline" tabindex="0">
-            <input type="radio" class="icon-right" name="radiosRight" value="">
+        <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>
 ```
 
@@ -153,23 +171,23 @@ export default () => (
 
 | 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". |
+| 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
 
@@ -238,23 +256,23 @@ export default () => {
 
 | 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". |
+| 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
 
@@ -348,23 +366,23 @@ export default () => {
 
 | 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". |
+| 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
 
@@ -503,23 +521,23 @@ export default () => {
 
 | 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". |
+| 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
 
@@ -661,23 +679,23 @@ export default () => {
 
 | 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". |
+| 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
 
@@ -820,23 +838,23 @@ export default () => {
 
 | 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". |
+| 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
 
@@ -955,23 +973,23 @@ export default () => {
 
 | 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". |
+| 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
 
@@ -1252,20 +1270,20 @@ export default () => {
 
 | 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". |
+| 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. |