@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/components/checkbox.md

@@ -0,0 +1,996 @@
+# Checkbox
+
+*Category:* Components
+*Section:* Interaction
+*Source:* https://uikit.developers.rio.cloud/#components/checkbox
+*Captured:* 2025-12-12T12:38:13.845Z
+
+## Checkbox
+
+### Example: Example 1
+
+Select multipleSome custom text
+This one is initially checked
+Indeterminate state
+Disabled checkboxesDisabled checkbox
+Disabled checked checkbox
+Various propsCheckbox with provided label
+Checkbox with error state
+Required Checkbox *
+Required submit test
+
+Some text containing a link to Terms and Condition which need to be read.
+
+Option 1Option 2Option 3
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.
+
+Large checkbox
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.
+Checkbox inside grid layout
+
+#### Summary
+
+Select multipleSome custom text
+This one is initially checked
+Indeterminate state
+Disabled checkboxesDisabled checkbox
+Disabled checked checkbox
+Various propsCheckbox with provided label
+Checkbox with error state
+Required Checkbox *
+Required submit test
+
+Some text containing a link to Terms and Condition which need to be read.
+
+Option 1Option 2Option 3
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.
+
+Large checkbox
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.
+Checkbox inside grid layout
+
+#### React (tsx)
+
+```tsx
+import Checkbox from '@rio-cloud/rio-uikit/Checkbox';
+import Divider from '@rio-cloud/rio-uikit/Divider';
+
+import { dummyTextShort } from '../../../utils/data';
+
+export default () => (
+    <div className='row'>
+        <fieldset className='col-sm-4'>
+            <legend className='margin-bottom-5'>Select multiple</legend>
+            <p>
+                <Checkbox>Some custom text</Checkbox>
+            </p>
+            <p>
+                <Checkbox defaultChecked>This one is initially checked</Checkbox>
+            </p>
+            <p>
+                <Checkbox indeterminate>Indeterminate state</Checkbox>
+            </p>
+        </fieldset>
+        <fieldset className='col-sm-4'>
+            <legend className='margin-bottom-5'>Disabled checkboxes</legend>
+            <p>
+                <Checkbox disabled>Disabled checkbox</Checkbox>
+            </p>
+            <p>
+                <Checkbox disabled defaultChecked>
+                    Disabled checked checkbox
+                </Checkbox>
+            </p>
+        </fieldset>
+        <fieldset className='col-sm-4'>
+            <legend className='margin-bottom-5'>Various props</legend>
+            <p>
+                <Checkbox label='Checkbox with provided label' />
+            </p>
+            <p>
+                <Checkbox error label='Checkbox with error state' />
+            </p>
+            <form>
+                <p>
+                    <Checkbox required label='Required Checkbox *' />
+                </p>
+                <button className='btn btn-primary' type='submit'>
+                    Required submit test
+                </button>
+            </form>
+        </fieldset>
+        <div className='col-12'>
+            <Divider />
+            <p>
+                <Checkbox>
+                    <span>
+                        Some text containing a link to <span className='link'>Terms and Condition</span> which need to
+                        be read.
+                    </span>
+                </Checkbox>
+            </p>
+            <Divider />
+            <p>
+                <Checkbox inline>Option 1</Checkbox>
+                <Checkbox inline>Option 2</Checkbox>
+                <Checkbox inline>Option 3</Checkbox>
+            </p>
+            <Divider />
+            <div className='display-flex content-space-between gap-20'>
+                <Checkbox>{dummyTextShort}</Checkbox>
+
+                <Checkbox right>{dummyTextShort}</Checkbox>
+            </div>
+            <Divider />
+            <p>
+                <Checkbox size='large'>Large checkbox</Checkbox>
+            </p>
+            <Divider />
+            <p>
+                <Checkbox />
+            </p>
+            <Divider />
+        </div>
+        <div className='col-12'>
+            <div className='display-grid gap-20 align-items-baseline grid-cols-9'>
+                <div className='grid-colspan-3'>{dummyTextShort}</div>
+                <div className='grid-colspan-4'>
+                    <Checkbox label='Checkbox inside grid layout' />
+                </div>
+            </div>
+        </div>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="row">
+    <fieldset class="col-sm-4">
+        <legend class="margin-bottom-5">Select multiple</legend>
+        <p>
+            <label class="checkbox" tabindex="0">
+                <input type="checkbox" class="">
+                <span class="checkbox-text">
+                    <span>Some custom text</span>
+                </span>
+            </label>
+        </p>
+        <p>
+            <label class="checkbox" tabindex="0">
+                <input type="checkbox" class="" checked="">
+                <span class="checkbox-text">
+                    <span>This one is initially checked</span>
+                </span>
+            </label>
+        </p>
+        <p>
+            <label class="checkbox" tabindex="0">
+                <input type="checkbox" class="indeterminate">
+                <span class="checkbox-text">
+                    <span>Indeterminate state</span>
+                </span>
+            </label>
+        </p>
+    </fieldset>
+    <fieldset class="col-sm-4">
+        <legend class="margin-bottom-5">Disabled checkboxes</legend>
+        <p>
+            <label class="checkbox" tabindex="0">
+                <input type="checkbox" disabled="" class="">
+                <span class="checkbox-text">
+                    <span>Disabled checkbox</span>
+                </span>
+            </label>
+        </p>
+        <p>
+            <label class="checkbox" tabindex="0">
+                <input type="checkbox" disabled="" class="" checked="">
+                <span class="checkbox-text">
+                    <span>Disabled checked checkbox</span>
+                </span>
+            </label>
+        </p>
+    </fieldset>
+    <fieldset class="col-sm-4">
+        <legend class="margin-bottom-5">Various props</legend>
+        <p>
+            <label class="checkbox" tabindex="0">
+                <input type="checkbox" class="">
+                <span class="checkbox-text">
+                    <span>Checkbox with provided label</span>
+                </span>
+            </label>
+        </p>
+        <p>
+            <label class="checkbox" tabindex="0">
+                <input type="checkbox" class="error">
+                <span class="checkbox-text">
+                    <span>Checkbox with error state</span>
+                </span>
+            </label>
+        </p>
+        <form>
+            <p>
+                <label class="checkbox" tabindex="0">
+                    <input type="checkbox" required="" class="">
+                    <span class="checkbox-text">
+                        <span>Required Checkbox *</span>
+                    </span>
+                </label>
+            </p>
+            <button class="btn btn-primary" type="submit">Required submit test</button>
+        </form>
+    </fieldset>
+    <div class="col-12">
+        <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
+            <div class="divider-line bg-light" style="width: 100%; height: 1px;">
+            </div>
+        </div>
+        <p>
+            <label class="checkbox" tabindex="0">
+                <input type="checkbox" class="">
+                <span class="checkbox-text">
+                    <span>
+                        <span>Some text containing a link to <span class="link">Terms and Condition</span> which need to be read.</span>
+                    </span>
+                </span>
+            </label>
+        </p>
+        <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
+            <div class="divider-line bg-light" style="width: 100%; height: 1px;">
+            </div>
+        </div>
+        <p>
+            <label class="checkbox checkbox-inline" tabindex="0">
+                <input type="checkbox" class="">
+                <span class="checkbox-text">
+                    <span>Option 1</span>
+                </span>
+            </label>
+            <label class="checkbox checkbox-inline" tabindex="0">
+                <input type="checkbox" class="">
+                <span class="checkbox-text">
+                    <span>Option 2</span>
+                </span>
+            </label>
+            <label class="checkbox checkbox-inline" tabindex="0">
+                <input type="checkbox" class="">
+                <span class="checkbox-text">
+                    <span>Option 3</span>
+                </span>
+            </label>
+        </p>
+        <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
+            <div class="divider-line bg-light" style="width: 100%; height: 1px;">
+            </div>
+        </div>
+        <div class="display-flex content-space-between gap-20">
+            <label class="checkbox" tabindex="0">
+                <input type="checkbox" class="">
+                <span class="checkbox-text">
+                    <span>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.</span>
+                </span>
+            </label>
+            <label class="checkbox checkbox-right" tabindex="0">
+                <input type="checkbox" class="">
+                <span class="checkbox-text">
+                    <span>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.</span>
+                </span>
+            </label>
+        </div>
+        <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
+            <div class="divider-line bg-light" style="width: 100%; height: 1px;">
+            </div>
+        </div>
+        <p>
+            <label class="checkbox checkbox-large" tabindex="0">
+                <input type="checkbox" class="large">
+                <span class="checkbox-text">
+                    <span>Large checkbox</span>
+                </span>
+            </label>
+        </p>
+        <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
+            <div class="divider-line bg-light" style="width: 100%; height: 1px;">
+            </div>
+        </div>
+        <p>
+            <label class="checkbox" tabindex="0">
+                <input type="checkbox" class="">
+                <span class="checkbox-text">
+                </span>
+            </label>
+        </p>
+        <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
+            <div class="divider-line bg-light" style="width: 100%; height: 1px;">
+            </div>
+        </div>
+    </div>
+    <div class="col-12">
+        <div class="display-grid gap-20 align-items-baseline grid-cols-9">
+            <div class="grid-colspan-3">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.</div>
+            <div class="grid-colspan-4">
+                <label class="checkbox" tabindex="0">
+                    <input type="checkbox" class="">
+                    <span class="checkbox-text">
+                        <span>Checkbox inside grid layout</span>
+                    </span>
+                </label>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| id | String | — | Passed through as HTML attribute to the underlying input. id. (Uses name otherwise.) |
+| name | String | — | Passed through as HTML attribute to the underlying inputname. |
+| label | String / Node | — | Define some text as a label. |
+| checked | String / Boolean | — | Defines whether the checkbox is checked or not (state cannot be changed). |
+| defaultChecked | String / Boolean | — | Defines whether the checkbox is initially checked or not (state can be changed on click). |
+| disabled | Boolean | false | Defines whether the checkbox is disabled or not. |
+| indeterminate | Boolean | false | Defines if the checkbox is in an indeterminate state with regards to other checkboxes that may be in different selection state. |
+| inline | Boolean | false | Defines whether the checkbox is applying an inline style. Use this in combination with other checkboxes. |
+| right | Boolean | false | Defines whether the checkbox is on the right side. |
+| custom | Boolean | false | Allows for rendering a completely different layout with or without a checkbox tick. |
+| onClick | Function | () => {} | Callback function that is invoked when the checkbox is checked or unchecked. |
+| onChange | Function | () => {} | Callback function that is invoked when the checkbox value changes. This will also be invoked by a keyboard event. |
+| error | Boolean | false | Use "error" to change color of the checkbox. |
+| required | Boolean | false | Defines whether the checkbox is required or not. |
+| size | String | — | Defines the size of the checkbox. Omitting this prop renders the Checkbox in normal size. Possible values are: 'large' |
+| 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 |
+| className | String | — | Additional classes to be set on the input field. |
+| children | any | — | Any element to be rendered next to the checkbox. |
+| icon | String | — | Define a custom icon for the checkbox by naming a rioglyph icon like "rioglyph-truck". |
+| iconSize | Number | — | The icon size in pixel. |
+| iconLabelPosition | String | — | The label position for a custom icon checkbox. Using this on a regular checkbox has no effect. Possible values are: "horizontal" or "vertical". |
+| inputRef | Ref | — | A react ref assigned to the input itself. |
+
+## Controlled example
+
+### Example: Example 2
+
+Option 1Option 2Option 3
+
+#### Summary
+
+Option 1Option 2Option 3
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+import { pull } from 'es-toolkit/compat';
+
+import Checkbox from '@rio-cloud/rio-uikit/Checkbox';
+
+export default () => {
+    const [selectedOptions, setSelectedOptions] = useState([1]);
+
+    const handleSelect = (selected: number) => {
+        const updatedSelectedOptions = selectedOptions.includes(selected)
+            ? pull(selectedOptions, selected)
+            : [...selectedOptions, selected];
+
+        setSelectedOptions(updatedSelectedOptions);
+    };
+
+    return (
+        <div>
+            <Checkbox onChange={() => handleSelect(1)} checked={selectedOptions.includes(1)} inline>
+                Option 1
+            </Checkbox>
+            <Checkbox onChange={() => handleSelect(2)} checked={selectedOptions.includes(2)} inline>
+                Option 2
+            </Checkbox>
+            <Checkbox onChange={() => handleSelect(3)} checked={selectedOptions.includes(3)} inline>
+                Option 3
+            </Checkbox>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <label class="checkbox checkbox-inline" tabindex="0">
+        <input type="checkbox" class="" checked="">
+        <span class="checkbox-text">
+            <span>Option 1</span>
+        </span>
+    </label>
+    <label class="checkbox checkbox-inline" tabindex="0">
+        <input type="checkbox" class="">
+        <span class="checkbox-text">
+            <span>Option 2</span>
+        </span>
+    </label>
+    <label class="checkbox checkbox-inline" tabindex="0">
+        <input type="checkbox" class="">
+        <span class="checkbox-text">
+            <span>Option 3</span>
+        </span>
+    </label>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| id | String | — | Passed through as HTML attribute to the underlying input. id. (Uses name otherwise.) |
+| name | String | — | Passed through as HTML attribute to the underlying inputname. |
+| label | String / Node | — | Define some text as a label. |
+| checked | String / Boolean | — | Defines whether the checkbox is checked or not (state cannot be changed). |
+| defaultChecked | String / Boolean | — | Defines whether the checkbox is initially checked or not (state can be changed on click). |
+| disabled | Boolean | false | Defines whether the checkbox is disabled or not. |
+| indeterminate | Boolean | false | Defines if the checkbox is in an indeterminate state with regards to other checkboxes that may be in different selection state. |
+| inline | Boolean | false | Defines whether the checkbox is applying an inline style. Use this in combination with other checkboxes. |
+| right | Boolean | false | Defines whether the checkbox is on the right side. |
+| custom | Boolean | false | Allows for rendering a completely different layout with or without a checkbox tick. |
+| onClick | Function | () => {} | Callback function that is invoked when the checkbox is checked or unchecked. |
+| onChange | Function | () => {} | Callback function that is invoked when the checkbox value changes. This will also be invoked by a keyboard event. |
+| error | Boolean | false | Use "error" to change color of the checkbox. |
+| required | Boolean | false | Defines whether the checkbox is required or not. |
+| size | String | — | Defines the size of the checkbox. Omitting this prop renders the Checkbox in normal size. Possible values are: 'large' |
+| 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 |
+| className | String | — | Additional classes to be set on the input field. |
+| children | any | — | Any element to be rendered next to the checkbox. |
+| icon | String | — | Define a custom icon for the checkbox by naming a rioglyph icon like "rioglyph-truck". |
+| iconSize | Number | — | The icon size in pixel. |
+| iconLabelPosition | String | — | The label position for a custom icon checkbox. Using this on a regular checkbox has no effect. Possible values are: "horizontal" or "vertical". |
+| inputRef | Ref | — | A react ref assigned to the input itself. |
+
+## Custom card example
+
+> Note: When using the custom option, make sure to wrap the children with the class name checkbox-text-wrapper. For using the checkbox tick, use an element with class name checkbox-text.
+
+### Example: This option is a first option
+
+Custom checkbox listOption 1
+This option is a first option
+
+Option 2
+This option is a second option
+
+Option 3
+This option is a third option
+
+Custom checkbox list as pick list without tickBanana
+Peach
+Pear
+Strawberry
+
+#### Summary
+
+Custom checkbox listOption 1
+This option is a first option
+
+Option 2
+This option is a second option
+
+Option 3
+This option is a third option
+
+Custom checkbox list as pick list without tickBanana
+Peach
+Pear
+Strawberry
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+import { pull } from 'es-toolkit/compat';
+
+import Checkbox from '@rio-cloud/rio-uikit/Checkbox';
+
+const getCheckboxClasses = (isSelected: boolean) =>
+    `padding-15 user-select-none border rounded ${isSelected ? 'border-color-highlight' : ''}`;
+
+const getPicklistCheckboxClasses = (isSelected: boolean) =>
+    `padding-x-15 padding-y-5 user-select-none rounded shadow-accent ${isSelected ? 'border-color-highlight bg-highlight text-color-white' : 'hover-bg-highlight-decent text-color-darker'}`;
+
+export default () => {
+    const [selectedOptions, setSelectedOptions] = useState([1]);
+
+    const handleSelect = (selected: number) => {
+        const updatedSelectedOptions = selectedOptions.includes(selected)
+            ? pull(selectedOptions, selected)
+            : [...selectedOptions, selected];
+
+        setSelectedOptions(updatedSelectedOptions);
+    };
+
+    return (
+        <form>
+            <fieldset className='display-flex gap-15 margin-bottom-50'>
+                <legend className='margin-bottom-20'>Custom checkbox list</legend>
+                <Checkbox
+                    onChange={() => handleSelect(1)}
+                    checked={selectedOptions.includes(1)}
+                    custom
+                    className={getCheckboxClasses(selectedOptions.includes(1))}
+                >
+                    <div className='checkbox-text-wrapper display-flex justify-content-between'>
+                        <div className='margin-right-15'>
+                            <div className='text-medium text-size-16 text-color-darker'>Option 1</div>
+                            <div className='text-color-dark'>This option is a first option</div>
+                        </div>
+                        <div className='checkbox-text' />
+                    </div>
+                </Checkbox>
+                <Checkbox
+                    onChange={() => handleSelect(2)}
+                    checked={selectedOptions.includes(2)}
+                    custom
+                    className={getCheckboxClasses(selectedOptions.includes(2))}
+                >
+                    <div className='checkbox-text-wrapper display-flex justify-content-between'>
+                        <div className='margin-right-15'>
+                            <div className='text-medium text-size-16 text-color-darker'>Option 2</div>
+                            <div className='text-color-dark'>This option is a second option</div>
+                        </div>
+                        <div className='checkbox-text' />
+                    </div>
+                </Checkbox>
+                <Checkbox
+                    onChange={() => handleSelect(3)}
+                    checked={selectedOptions.includes(3)}
+                    custom
+                    className={getCheckboxClasses(selectedOptions.includes(3))}
+                >
+                    <div className='checkbox-text-wrapper display-flex justify-content-between'>
+                        <div className='margin-right-15'>
+                            <div className='text-medium text-size-16 text-color-darker'>Option 3</div>
+                            <div className='text-color-dark'>This option is a third option</div>
+                        </div>
+                        <div className='checkbox-text' />
+                    </div>
+                </Checkbox>
+            </fieldset>
+
+            <fieldset className='display-flex gap-5'>
+                <legend className='margin-bottom-20'>Custom checkbox list as pick list without tick</legend>
+                <Checkbox
+                    onChange={() => handleSelect(4)}
+                    checked={selectedOptions.includes(4)}
+                    custom
+                    className={getPicklistCheckboxClasses(selectedOptions.includes(4))}
+                >
+                    <div className='checkbox-text-wrapper'>Banana</div>
+                </Checkbox>
+                <Checkbox
+                    onChange={() => handleSelect(5)}
+                    checked={selectedOptions.includes(5)}
+                    custom
+                    className={getPicklistCheckboxClasses(selectedOptions.includes(5))}
+                >
+                    <div className='checkbox-text-wrapper'>Peach</div>
+                </Checkbox>
+                <Checkbox
+                    onChange={() => handleSelect(6)}
+                    checked={selectedOptions.includes(6)}
+                    custom
+                    className={getPicklistCheckboxClasses(selectedOptions.includes(6))}
+                >
+                    <div className='checkbox-text-wrapper'>Pear</div>
+                </Checkbox>
+                <Checkbox
+                    onChange={() => handleSelect(7)}
+                    checked={selectedOptions.includes(7)}
+                    custom
+                    className={getPicklistCheckboxClasses(selectedOptions.includes(7))}
+                >
+                    <div className='checkbox-text-wrapper'>Strawberry</div>
+                </Checkbox>
+            </fieldset>
+        </form>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<form>
+    <fieldset class="display-flex gap-15 margin-bottom-50">
+        <legend class="margin-bottom-20">Custom checkbox list</legend>
+        <label class="checkbox padding-15 user-select-none border rounded border-color-highlight" tabindex="0">
+            <input type="checkbox" class="padding-15 user-select-none border rounded border-color-highlight" checked="">
+            <div class="checkbox-text-wrapper display-flex justify-content-between">
+                <div class="margin-right-15">
+                    <div class="text-medium text-size-16 text-color-darker">Option 1</div>
+                    <div class="text-color-dark">This option is a first option</div>
+                </div>
+                <div class="checkbox-text">
+                </div>
+            </div>
+        </label>
+        <label class="checkbox padding-15 user-select-none border rounded " tabindex="0">
+            <input type="checkbox" class="padding-15 user-select-none border rounded ">
+            <div class="checkbox-text-wrapper display-flex justify-content-between">
+                <div class="margin-right-15">
+                    <div class="text-medium text-size-16 text-color-darker">Option 2</div>
+                    <div class="text-color-dark">This option is a second option</div>
+                </div>
+                <div class="checkbox-text">
+                </div>
+            </div>
+        </label>
+        <label class="checkbox padding-15 user-select-none border rounded " tabindex="0">
+            <input type="checkbox" class="padding-15 user-select-none border rounded ">
+            <div class="checkbox-text-wrapper display-flex justify-content-between">
+                <div class="margin-right-15">
+                    <div class="text-medium text-size-16 text-color-darker">Option 3</div>
+                    <div class="text-color-dark">This option is a third option</div>
+                </div>
+                <div class="checkbox-text">
+                </div>
+            </div>
+        </label>
+    </fieldset>
+    <fieldset class="display-flex gap-5">
+        <legend class="margin-bottom-20">Custom checkbox list as pick list without tick</legend>
+        <label class="checkbox padding-x-15 padding-y-5 user-select-none rounded shadow-accent hover-bg-highlight-decent text-color-darker" tabindex="0">
+            <input type="checkbox" class="padding-x-15 padding-y-5 user-select-none rounded shadow-accent hover-bg-highlight-decent text-color-darker">
+            <div class="checkbox-text-wrapper">Banana</div>
+        </label>
+        <label class="checkbox padding-x-15 padding-y-5 user-select-none rounded shadow-accent hover-bg-highlight-decent text-color-darker" tabindex="0">
+            <input type="checkbox" class="padding-x-15 padding-y-5 user-select-none rounded shadow-accent hover-bg-highlight-decent text-color-darker">
+            <div class="checkbox-text-wrapper">Peach</div>
+        </label>
+        <label class="checkbox padding-x-15 padding-y-5 user-select-none rounded shadow-accent hover-bg-highlight-decent text-color-darker" tabindex="0">
+            <input type="checkbox" class="padding-x-15 padding-y-5 user-select-none rounded shadow-accent hover-bg-highlight-decent text-color-darker">
+            <div class="checkbox-text-wrapper">Pear</div>
+        </label>
+        <label class="checkbox padding-x-15 padding-y-5 user-select-none rounded shadow-accent hover-bg-highlight-decent text-color-darker" tabindex="0">
+            <input type="checkbox" class="padding-x-15 padding-y-5 user-select-none rounded shadow-accent hover-bg-highlight-decent text-color-darker">
+            <div class="checkbox-text-wrapper">Strawberry</div>
+        </label>
+    </fieldset>
+</form>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| id | String | — | Passed through as HTML attribute to the underlying input. id. (Uses name otherwise.) |
+| name | String | — | Passed through as HTML attribute to the underlying inputname. |
+| label | String / Node | — | Define some text as a label. |
+| checked | String / Boolean | — | Defines whether the checkbox is checked or not (state cannot be changed). |
+| defaultChecked | String / Boolean | — | Defines whether the checkbox is initially checked or not (state can be changed on click). |
+| disabled | Boolean | false | Defines whether the checkbox is disabled or not. |
+| indeterminate | Boolean | false | Defines if the checkbox is in an indeterminate state with regards to other checkboxes that may be in different selection state. |
+| inline | Boolean | false | Defines whether the checkbox is applying an inline style. Use this in combination with other checkboxes. |
+| right | Boolean | false | Defines whether the checkbox is on the right side. |
+| custom | Boolean | false | Allows for rendering a completely different layout with or without a checkbox tick. |
+| onClick | Function | () => {} | Callback function that is invoked when the checkbox is checked or unchecked. |
+| onChange | Function | () => {} | Callback function that is invoked when the checkbox value changes. This will also be invoked by a keyboard event. |
+| error | Boolean | false | Use "error" to change color of the checkbox. |
+| required | Boolean | false | Defines whether the checkbox is required or not. |
+| size | String | — | Defines the size of the checkbox. Omitting this prop renders the Checkbox in normal size. Possible values are: 'large' |
+| 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 |
+| className | String | — | Additional classes to be set on the input field. |
+| children | any | — | Any element to be rendered next to the checkbox. |
+| icon | String | — | Define a custom icon for the checkbox by naming a rioglyph icon like "rioglyph-truck". |
+| iconSize | Number | — | The icon size in pixel. |
+| iconLabelPosition | String | — | The label position for a custom icon checkbox. Using this on a regular checkbox has no effect. Possible values are: "horizontal" or "vertical". |
+| inputRef | Ref | — | A react ref assigned to the input itself. |
+
+## Custom list example
+
+### Example: This option is a first option
+
+Custom checkbox list
+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
+
+Custom checkbox list
+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 { pull } from 'es-toolkit/compat';
+
+import Checkbox from '@rio-cloud/rio-uikit/Checkbox';
+
+export default () => {
+    const [selectedOptions, setSelectedOptions] = useState([1]);
+
+    const handleSelect = (selected: number) => {
+        const updatedSelectedOptions = selectedOptions.includes(selected)
+            ? pull(selectedOptions, selected)
+            : [...selectedOptions, selected];
+
+        setSelectedOptions(updatedSelectedOptions);
+    };
+
+    return (
+        <fieldset className='display-flex flex-column width-300'>
+            <legend>Custom checkbox list</legend>
+            <div className='border rounded'>
+                <Checkbox
+                    onChange={() => handleSelect(1)}
+                    checked={selectedOptions.includes(1)}
+                    custom
+                    className='padding-15 border border-bottom-only user-select-none hover-bg-highlight-decent rounded-top'
+                >
+                    <div className='checkbox-text-wrapper display-flex gap-10'>
+                        <div className='checkbox-text' />
+                        <div className='flex-1-1'>
+                            <div className='text-medium text-size-16 text-color-darker'>Option 1</div>
+                            <div className='text-color-dark'>This option is a first option</div>
+                        </div>
+                    </div>
+                </Checkbox>
+                <Checkbox
+                    onChange={() => handleSelect(2)}
+                    checked={selectedOptions.includes(2)}
+                    custom
+                    className='padding-15 border border-bottom-only user-select-none hover-bg-highlight-decent'
+                >
+                    <div className='checkbox-text-wrapper display-flex gap-10'>
+                        <div className='checkbox-text' />
+                        <div className='flex-1-1'>
+                            <div className='text-medium text-size-16 text-color-darker'>Option 2</div>
+                            <div className='text-color-dark'>This option is a second option</div>
+                        </div>
+                    </div>
+                </Checkbox>
+                <Checkbox
+                    onChange={() => handleSelect(3)}
+                    checked={selectedOptions.includes(3)}
+                    custom
+                    className='padding-15 user-select-none hover-bg-highlight-decent rounded-bottom'
+                >
+                    <div className='checkbox-text-wrapper display-flex gap-10'>
+                        <div className='checkbox-text' />
+                        <div className='flex-1-1'>
+                            <div className='text-medium text-size-16 text-color-darker'>Option 3</div>
+                            <div className='text-color-dark'>This option is a third option</div>
+                        </div>
+                    </div>
+                </Checkbox>
+            </div>
+        </fieldset>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<fieldset class="display-flex flex-column width-300">
+    <legend>Custom checkbox list</legend>
+    <div class="border rounded">
+        <label class="checkbox padding-15 border border-bottom-only user-select-none hover-bg-highlight-decent rounded-top" tabindex="0">
+            <input type="checkbox" class="padding-15 border border-bottom-only user-select-none hover-bg-highlight-decent rounded-top" checked="">
+            <div class="checkbox-text-wrapper display-flex gap-10">
+                <div class="checkbox-text">
+                </div>
+                <div class="flex-1-1">
+                    <div class="text-medium text-size-16 text-color-darker">Option 1</div>
+                    <div class="text-color-dark">This option is a first option</div>
+                </div>
+            </div>
+        </label>
+        <label class="checkbox padding-15 border border-bottom-only user-select-none hover-bg-highlight-decent" tabindex="0">
+            <input type="checkbox" class="padding-15 border border-bottom-only user-select-none hover-bg-highlight-decent">
+            <div class="checkbox-text-wrapper display-flex gap-10">
+                <div class="checkbox-text">
+                </div>
+                <div class="flex-1-1">
+                    <div class="text-medium text-size-16 text-color-darker">Option 2</div>
+                    <div class="text-color-dark">This option is a second option</div>
+                </div>
+            </div>
+        </label>
+        <label class="checkbox padding-15 user-select-none hover-bg-highlight-decent rounded-bottom" tabindex="0">
+            <input type="checkbox" class="padding-15 user-select-none hover-bg-highlight-decent rounded-bottom">
+            <div class="checkbox-text-wrapper display-flex gap-10">
+                <div class="checkbox-text">
+                </div>
+                <div class="flex-1-1">
+                    <div class="text-medium text-size-16 text-color-darker">Option 3</div>
+                    <div class="text-color-dark">This option is a third option</div>
+                </div>
+            </div>
+        </label>
+    </div>
+</fieldset>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| id | String | — | Passed through as HTML attribute to the underlying input. id. (Uses name otherwise.) |
+| name | String | — | Passed through as HTML attribute to the underlying inputname. |
+| label | String / Node | — | Define some text as a label. |
+| checked | String / Boolean | — | Defines whether the checkbox is checked or not (state cannot be changed). |
+| defaultChecked | String / Boolean | — | Defines whether the checkbox is initially checked or not (state can be changed on click). |
+| disabled | Boolean | false | Defines whether the checkbox is disabled or not. |
+| indeterminate | Boolean | false | Defines if the checkbox is in an indeterminate state with regards to other checkboxes that may be in different selection state. |
+| inline | Boolean | false | Defines whether the checkbox is applying an inline style. Use this in combination with other checkboxes. |
+| right | Boolean | false | Defines whether the checkbox is on the right side. |
+| custom | Boolean | false | Allows for rendering a completely different layout with or without a checkbox tick. |
+| onClick | Function | () => {} | Callback function that is invoked when the checkbox is checked or unchecked. |
+| onChange | Function | () => {} | Callback function that is invoked when the checkbox value changes. This will also be invoked by a keyboard event. |
+| error | Boolean | false | Use "error" to change color of the checkbox. |
+| required | Boolean | false | Defines whether the checkbox is required or not. |
+| size | String | — | Defines the size of the checkbox. Omitting this prop renders the Checkbox in normal size. Possible values are: 'large' |
+| 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 |
+| className | String | — | Additional classes to be set on the input field. |
+| children | any | — | Any element to be rendered next to the checkbox. |
+| icon | String | — | Define a custom icon for the checkbox by naming a rioglyph icon like "rioglyph-truck". |
+| iconSize | Number | — | The icon size in pixel. |
+| iconLabelPosition | String | — | The label position for a custom icon checkbox. Using this on a regular checkbox has no effect. Possible values are: "horizontal" or "vertical". |
+| inputRef | Ref | — | A react ref assigned to the input itself. |
+
+## Checkbox with custom icon
+
+### Example: Example 5
+
+Option 1Option 2Option 3
+Option 1Option 2Option 3
+
+#### Summary
+
+Option 1Option 2Option 3
+Option 1Option 2Option 3
+
+#### React (tsx)
+
+```tsx
+import Checkbox from '@rio-cloud/rio-uikit/Checkbox';
+
+export default () => (
+    <div>
+        <div>
+            <Checkbox inline icon='rioglyph-truck' iconLabelPosition={Checkbox.ICON_LABEL_HORIZONTAL}>
+                Option 1
+            </Checkbox>
+            <Checkbox inline icon='rioglyph-bus' iconLabelPosition={Checkbox.ICON_LABEL_HORIZONTAL}>
+                Option 2
+            </Checkbox>
+            <Checkbox inline icon='rioglyph-van' iconLabelPosition='horizontal'>
+                Option 3
+            </Checkbox>
+        </div>
+        <hr />
+        <div>
+            <Checkbox inline className='width-50' icon='rioglyph-truck' iconSize={75}>
+                Option 1
+            </Checkbox>
+            <Checkbox inline icon='rioglyph-bus' iconSize={75}>
+                Option 2
+            </Checkbox>
+            <Checkbox inline icon='rioglyph-van' iconSize={75}>
+                Option 3
+            </Checkbox>
+        </div>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div>
+        <label class="checkbox checkbox-inline" tabindex="0">
+            <input type="checkbox" class="">
+            <span class="checkbox-icon label-horizontal">
+                <span class="rioglyph rioglyph-truck" style="width: 16px; height: 16px; font-size: 16px; line-height: 16px;">
+                </span>
+                <span class="checkbox-label">Option 1</span>
+            </span>
+        </label>
+        <label class="checkbox checkbox-inline" tabindex="0">
+            <input type="checkbox" class="">
+            <span class="checkbox-icon label-horizontal">
+                <span class="rioglyph rioglyph-bus" style="width: 16px; height: 16px; font-size: 16px; line-height: 16px;">
+                </span>
+                <span class="checkbox-label">Option 2</span>
+            </span>
+        </label>
+        <label class="checkbox checkbox-inline" tabindex="0">
+            <input type="checkbox" class="">
+            <span class="checkbox-icon label-horizontal">
+                <span class="rioglyph rioglyph-van" style="width: 16px; height: 16px; font-size: 16px; line-height: 16px;">
+                </span>
+                <span class="checkbox-label">Option 3</span>
+            </span>
+        </label>
+    </div>
+    <hr>
+    <div>
+        <label class="checkbox checkbox-inline width-50" tabindex="0">
+            <input type="checkbox" class="width-50">
+            <span class="checkbox-icon label-vertical">
+                <span class="rioglyph rioglyph-truck" style="width: 75px; height: 75px; font-size: 75px; line-height: 75px;">
+                </span>
+                <span class="checkbox-label">Option 1</span>
+            </span>
+        </label>
+        <label class="checkbox checkbox-inline" tabindex="0">
+            <input type="checkbox" class="">
+            <span class="checkbox-icon label-vertical">
+                <span class="rioglyph rioglyph-bus" style="width: 75px; height: 75px; font-size: 75px; line-height: 75px;">
+                </span>
+                <span class="checkbox-label">Option 2</span>
+            </span>
+        </label>
+        <label class="checkbox checkbox-inline" tabindex="0">
+            <input type="checkbox" class="">
+            <span class="checkbox-icon label-vertical">
+                <span class="rioglyph rioglyph-van" style="width: 75px; height: 75px; font-size: 75px; line-height: 75px;">
+                </span>
+                <span class="checkbox-label">Option 3</span>
+            </span>
+        </label>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| id | String | — | Passed through as HTML attribute to the underlying input. id. (Uses name otherwise.) |
+| name | String | — | Passed through as HTML attribute to the underlying inputname. |
+| label | String / Node | — | Define some text as a label. |
+| checked | String / Boolean | — | Defines whether the checkbox is checked or not (state cannot be changed). |
+| defaultChecked | String / Boolean | — | Defines whether the checkbox is initially checked or not (state can be changed on click). |
+| disabled | Boolean | false | Defines whether the checkbox is disabled or not. |
+| indeterminate | Boolean | false | Defines if the checkbox is in an indeterminate state with regards to other checkboxes that may be in different selection state. |
+| inline | Boolean | false | Defines whether the checkbox is applying an inline style. Use this in combination with other checkboxes. |
+| right | Boolean | false | Defines whether the checkbox is on the right side. |
+| custom | Boolean | false | Allows for rendering a completely different layout with or without a checkbox tick. |
+| onClick | Function | () => {} | Callback function that is invoked when the checkbox is checked or unchecked. |
+| onChange | Function | () => {} | Callback function that is invoked when the checkbox value changes. This will also be invoked by a keyboard event. |
+| error | Boolean | false | Use "error" to change color of the checkbox. |
+| required | Boolean | false | Defines whether the checkbox is required or not. |
+| size | String | — | Defines the size of the checkbox. Omitting this prop renders the Checkbox in normal size. Possible values are: 'large' |
+| 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 |
+| className | String | — | Additional classes to be set on the input field. |
+| children | any | — | Any element to be rendered next to the checkbox. |
+| icon | String | — | Define a custom icon for the checkbox by naming a rioglyph icon like "rioglyph-truck". |
+| iconSize | Number | — | The icon size in pixel. |
+| iconLabelPosition | String | — | The label position for a custom icon checkbox. Using this on a regular checkbox has no effect. Possible values are: "horizontal" or "vertical". |
+| inputRef | Ref | — | A react ref assigned to the input itself. |