@rio-cloud/uikit-mcp 1.1.3 → 1.1.4

package/dist/docs/components/calendarStripe.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#components/calendarStripe
-*Captured:* 2026-01-07T12:11:51.321Z
+*Captured:* 2026-01-14T09:07:42.234Z
 
 A headless component where you provide a function that renders the UI for every day to be displayed.
 
@@ -12,30 +12,30 @@ A headless component where you provide a function that renders the UI for every
 ### Example: Example 1
 
 Thursday
-8 January 2026
+15 January 2026
 
 Friday
-9 January 2026
+16 January 2026
 
 Saturday
-10 January 2026
+17 January 2026
 
 Sunday
-11 January 2026
+18 January 2026
 
 #### Summary
 
 Thursday
-8 January 2026
+15 January 2026
 
 Friday
-9 January 2026
+16 January 2026
 
 Saturday
-10 January 2026
+17 January 2026
 
 Sunday
-11 January 2026
+18 January 2026
 
 #### React (tsx)
 
@@ -131,7 +131,7 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
                             <div class="display-flex align-items-center justify-content-between">
                                 <div class="display-flex flex-column gap-5 text-size-14 line-height-14">
                                     <div>Thursday</div>
-                                    <div class="text-size-16 text-medium">8 January 2026</div>
+                                    <div class="text-size-16 text-medium">15 January 2026</div>
                                 </div>
                                 <div class="text-color-primary text-size-16 width-20">
                                 </div>
@@ -143,7 +143,7 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
                             <div class="display-flex align-items-center justify-content-between">
                                 <div class="display-flex flex-column gap-5 text-size-14 line-height-14">
                                     <div>Friday</div>
-                                    <div class="text-size-16 text-medium">9 January 2026</div>
+                                    <div class="text-size-16 text-medium">16 January 2026</div>
                                 </div>
                                 <div class="text-color-primary text-size-16 width-20">
                                 </div>
@@ -155,7 +155,7 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
                             <div class="display-flex align-items-center justify-content-between">
                                 <div class="display-flex flex-column gap-5 text-size-14 line-height-14">
                                     <div>Saturday</div>
-                                    <div class="text-size-16 text-medium">10 January 2026</div>
+                                    <div class="text-size-16 text-medium">17 January 2026</div>
                                 </div>
                                 <div class="text-color-primary text-size-16 width-20">
                                 </div>
@@ -167,7 +167,7 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
                             <div class="display-flex align-items-center justify-content-between">
                                 <div class="display-flex flex-column gap-5 text-size-14 line-height-14">
                                     <div>Sunday</div>
-                                    <div class="text-size-16 text-medium">11 January 2026</div>
+                                    <div class="text-size-16 text-medium">18 January 2026</div>
                                 </div>
                                 <div class="text-color-primary text-size-16 width-20">
                                 </div>
@@ -187,51 +187,38 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
 </div>
 ```
 
-#### Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| minDayWith | Number | 200 | The minimum width in pixel of a single day column. This value determines how many days are shown per page depending on the parent width. |
-| minDays | Number | 1 | The minimum amount of days that should be shown per page. |
-| maxDays | Number | 7 | The maximum amount of days that should be shown per page. |
-| skipWeekends | Boolean | false | Defines whether the days for the weekends are included or not. |
-| startDate | Date | new Date() | The date of the first day that are rendered. |
-| renderDay | Function | — | A function that renders each individual day to be displayed. |
-| onPreviousClick | (newStartDate: Date) => void | — | Callback function for when the previous button is clicked. |
-| onNextClick | (newStartDate: Date) => void | — | Callback function for when the next button is clicked. |
-| buttonClassName | String | — | Additional classes set to the navigation buttons. |
-| className | String | — | Additional classes set to the calendar element. |
-| daysWrapperClassNames | String | — | Additional classes set to the days wrapper element. |
-| dayWrapperClassNames | String | — | Additional classes set to the day wrapper element. |
-
 ### Example: Example 2
 
 Jan
-8
+15
+2026
+
+Jan
+16
 2026
 
 Jan
-9
+17
 2026
 
 Jan
-10
+18
 2026
 
 Jan
-11
+19
 2026
 
 Jan
-12
+20
 2026
 
 Jan
-13
+21
 2026
 
 Jan
-14
+22
 2026
 
 Set to JanuaryToggle Weekends
@@ -239,31 +226,35 @@ Set to JanuaryToggle Weekends
 #### Summary
 
 Jan
-8
+15
 2026
 
 Jan
-9
+16
 2026
 
 Jan
-10
+17
 2026
 
 Jan
-11
+18
 2026
 
 Jan
-12
+19
 2026
 
 Jan
-13
+20
 2026
 
 Jan
-14
+21
+2026
+
+Jan
+22
 2026
 
 Set to JanuaryToggle Weekends
@@ -390,7 +381,7 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
                         <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
                                 <div class="text-size-12 line-height-12">Jan</div>
-                                <div class="text-size-h3 line-height-h3">8</div>
+                                <div class="text-size-h3 line-height-h3">15</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -399,7 +390,7 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
                         <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
                                 <div class="text-size-12 line-height-12">Jan</div>
-                                <div class="text-size-h3 line-height-h3">9</div>
+                                <div class="text-size-h3 line-height-h3">16</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -408,7 +399,7 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
                         <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
                                 <div class="text-size-12 line-height-12">Jan</div>
-                                <div class="text-size-h3 line-height-h3">10</div>
+                                <div class="text-size-h3 line-height-h3">17</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -417,7 +408,7 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
                         <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
                                 <div class="text-size-12 line-height-12">Jan</div>
-                                <div class="text-size-h3 line-height-h3">11</div>
+                                <div class="text-size-h3 line-height-h3">18</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -426,7 +417,7 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
                         <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
                                 <div class="text-size-12 line-height-12">Jan</div>
-                                <div class="text-size-h3 line-height-h3">12</div>
+                                <div class="text-size-h3 line-height-h3">19</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -435,7 +426,7 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
                         <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
                                 <div class="text-size-12 line-height-12">Jan</div>
-                                <div class="text-size-h3 line-height-h3">13</div>
+                                <div class="text-size-h3 line-height-h3">20</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -444,7 +435,7 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
                         <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
                                 <div class="text-size-12 line-height-12">Jan</div>
-                                <div class="text-size-h3 line-height-h3">14</div>
+                                <div class="text-size-h3 line-height-h3">21</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -453,7 +444,7 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
                         <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
                                 <div class="text-size-12 line-height-12">Jan</div>
-                                <div class="text-size-h3 line-height-h3">15</div>
+                                <div class="text-size-h3 line-height-h3">22</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -462,7 +453,7 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
                         <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
                                 <div class="text-size-12 line-height-12">Jan</div>
-                                <div class="text-size-h3 line-height-h3">16</div>
+                                <div class="text-size-h3 line-height-h3">23</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -471,7 +462,7 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
                         <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
                                 <div class="text-size-12 line-height-12">Jan</div>
-                                <div class="text-size-h3 line-height-h3">17</div>
+                                <div class="text-size-h3 line-height-h3">24</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -489,21 +480,4 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
         <button type="button" class="btn btn-default btn-component" tabindex="0">Toggle Weekends</button>
     </div>
 </div>
-```
-
-#### Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| minDayWith | Number | 200 | The minimum width in pixel of a single day column. This value determines how many days are shown per page depending on the parent width. |
-| minDays | Number | 1 | The minimum amount of days that should be shown per page. |
-| maxDays | Number | 7 | The maximum amount of days that should be shown per page. |
-| skipWeekends | Boolean | false | Defines whether the days for the weekends are included or not. |
-| startDate | Date | new Date() | The date of the first day that are rendered. |
-| renderDay | Function | — | A function that renders each individual day to be displayed. |
-| onPreviousClick | (newStartDate: Date) => void | — | Callback function for when the previous button is clicked. |
-| onNextClick | (newStartDate: Date) => void | — | Callback function for when the next button is clicked. |
-| buttonClassName | String | — | Additional classes set to the navigation buttons. |
-| className | String | — | Additional classes set to the calendar element. |
-| daysWrapperClassNames | String | — | Additional classes set to the days wrapper element. |
-| dayWrapperClassNames | String | — | Additional classes set to the day wrapper element. |
+```

package/dist/docs/components/card.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#components/card
-*Captured:* 2026-01-07T12:11:36.445Z
+*Captured:* 2026-01-14T09:07:26.234Z
 
 The Card is a utility component designed to simplify usage of default card styling.
 
@@ -75,12 +75,4 @@ export default () => (
         </div>
     </div>
 </div>
-```
-
-#### Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| shadow | 'subtle' \| 'muted' \| 'accent' \| 'default' \| 'smooth' \| 'muted-down' \| 'default-down' \| 'none' | default | The shadow class. |
-| shadow | 0 \| 5 \| 10 \| 15 \| 20 \| 25 \| 50 | 15 | The card padding. |
-| className | string | — | Additional classes to be set on the wrapper element. |
+```

package/dist/docs/components/carousel.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#components/carousel
-*Captured:* 2026-01-07T12:11:36.276Z
+*Captured:* 2026-01-14T09:07:26.721Z
 
 ## Carousel
 

package/dist/docs/components/chartColors.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Charts
 *Source:* https://uikit.developers.rio.cloud/#components/chartColors
-*Captured:* 2026-01-07T12:12:18.159Z
+*Captured:* 2026-01-14T09:08:16.568Z
 
 The colors listed below are exposed via the colors.json file and can also be used with other charting libraries to achieve a common look and feel.
 

package/dist/docs/components/chartsGettingStarted.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Charts
 *Source:* https://uikit.developers.rio.cloud/#components/chartsGettingStarted
-*Captured:* 2026-01-07T12:12:17.725Z
+*Captured:* 2026-01-14T09:08:15.330Z
 
 The UIKIT chart components are simple wrapper components for the Recharts charting library.
 

package/dist/docs/components/chat.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* CSS Only
 *Source:* https://uikit.developers.rio.cloud/#components/chat
-*Captured:* 2026-01-07T12:12:02.426Z
+*Captured:* 2026-01-14T09:07:54.061Z
 
 The chat component is a pure CSS component.
 
@@ -524,7 +524,7 @@ export default () => {
 
 ```html
 <div class="display-flex flex-column height-600 position-relative padding-right-5 overflow-hidden">
-    <div class="position-absolute left-0 right-0 justify-content-center display-flex z-index-1" style="opacity: 0; top: -6.23436px; transform: none;">
+    <div class="position-absolute left-0 right-0 justify-content-center display-flex z-index-1" style="opacity: 0; top: -28.0384px; transform: none;">
         <div class="rounded-circle bg-primary text-color-white text-center padding-x-10 padding-y-5 cursor-pointer shadow-smooth">Older messages</div>
     </div>
     <div class="scrollbar-fly-in smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">

package/dist/docs/components/checkbox.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#components/checkbox
-*Captured:* 2026-01-07T12:11:13.513Z
+*Captured:* 2026-01-14T09:07:01.013Z
 
 ## Checkbox
 
@@ -337,28 +337,8 @@ export default () => (
 
 | 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. |
+| iconLabelPosition | 'horizontal' \| 'vertical | — | — |
+| tabIndex |  | — | 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 |
 
 ## Controlled example
 
@@ -434,28 +414,8 @@ export default () => {
 
 | 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. |
+| iconLabelPosition | 'horizontal' \| 'vertical | — | — |
+| tabIndex |  | — | 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 |
 
 ## Custom card example
 
@@ -672,28 +632,8 @@ export default () => {
 
 | 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. |
+| iconLabelPosition | 'horizontal' \| 'vertical | — | — |
+| tabIndex |  | — | 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 |
 
 ## Custom list example
 
@@ -839,28 +779,8 @@ export default () => {
 
 | 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. |
+| iconLabelPosition | 'horizontal' \| 'vertical | — | — |
+| tabIndex |  | — | 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 |
 
 ## Checkbox with custom icon
 
@@ -972,25 +892,5 @@ export default () => (
 
 | 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. |
+| iconLabelPosition | 'horizontal' \| 'vertical | — | — |
+| tabIndex |  | — | 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 |