@iress-oss/ids-mcp-server 5.15.0 → 5.20.2

package/generated/docs/{components-radiogroup-docs.md → components_components-radiogroup-docs.md}

@@ -1,11 +1,13 @@
-[](#radiogroup)RadioGroup
-=========================
+RadioGroup
+==========
 
 Overview
 --------
 
 A radio group is a group of radio buttons that allows the user to select one option from multiple options, where all options are visible.
 
+[](./iframe.html?id=components-radiogroup--radio-children)
+
 Google
 
 Newspaper
@@ -14,9 +16,7 @@ Friend
 
 Other
 
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+Hide codedrawOpen in CodeSandbox
 
 <IressRadioGroup\>
   <IressRadio value\="google"\>
@@ -29,17 +29,125 @@ Hide code
     Other  </IressRadio\>
 </IressRadioGroup\>
 
-Copy
+```
+
+Props
+-----
+
+IressRadioGroupIressRadio
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content of the radio group, usually multiple `IressRadio` components.
+
+ReactNode
+
+
+
+ | \- | \- |
+| defaultValue | 
+
+Initial value of radio group when in uncontrolled mode.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+| hiddenRadio | 
+
+Hides the radio control to allow the creation of custom radio buttons.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| layout | 
+
+Sets which of the block / inline layout options apply.
+
+union
+
+
+
+ | 
+
+'stack'
+
+ | Set object |
+| name | 
+
+Name to be applied to all radios in the group.
+
+string
+
 
-[](#examples)Examples
----------------------
 
-### [](#radio-children)Radio children
+ | \- | Set string |
+| onChange | 
+
+Called when a user selects one of its children radio buttons. If you pass in a non-string value, you can access it using the second parameter of the function.
+
+( e: React.ChangeEvent<HTMLInputElement>, value?: FormControlValue, ) => void
+
+ | \- | \- |
+| readonly | 
+
+Renders a readonly radio group.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| required | 
+
+When true, marks the field as required
+
+boolean
+
+
+
+ | \- | Set boolean |
+| role | 
+
+ | 
+
+'radiogroup'
+
+ | Set object |
+| touch | 
+
+Add the button-like border and padding to radio when `touch` is true.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| value | 
+
+Value of radio group when in controlled mode.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+
+Examples
+--------
+
+### Radio children
 
 Individual radio buttons can be passed directly into `IressRadioGroup`.
 
 **Note:** The `mapRadioGroupOptions` helper function, originally used to map options to `IressRadio` components, is now deprecated. Instead, you can use `array.map` to map the options to `IressRadio` components.
 
+[](./iframe.html?id=components-radiogroup--radio-children)
+
 Google
 
 Newspaper
@@ -48,9 +156,7 @@ Friend
 
 Other
 
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+Hide codedrawOpen in CodeSandbox
 
 <IressRadioGroup\>
   <IressRadio value\="google"\>
@@ -63,14 +169,121 @@ Hide code
     Other  </IressRadio\>
 </IressRadioGroup\>
 
-Copy
+```
+
+#### Props
+
+IressRadioGroupIressRadio
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content of the radio group, usually multiple `IressRadio` components.
+
+ReactNode
+
+
+
+ | \- | \- |
+| defaultValue | 
+
+Initial value of radio group when in uncontrolled mode.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+| hiddenRadio | 
+
+Hides the radio control to allow the creation of custom radio buttons.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| layout | 
+
+Sets which of the block / inline layout options apply.
+
+union
+
+
+
+ | 
+
+'stack'
+
+ | Set object |
+| name | 
+
+Name to be applied to all radios in the group.
+
+string
+
 
-### [](#radio-selection)Radio selection
+
+ | \- | Set string |
+| onChange | 
+
+Called when a user selects one of its children radio buttons. If you pass in a non-string value, you can access it using the second parameter of the function.
+
+( e: React.ChangeEvent<HTMLInputElement>, value?: FormControlValue, ) => void
+
+ | \- | \- |
+| readonly | 
+
+Renders a readonly radio group.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| required | 
+
+When true, marks the field as required
+
+boolean
+
+
+
+ | \- | Set boolean |
+| role | 
+
+ | 
+
+'radiogroup'
+
+ | Set object |
+| touch | 
+
+Add the button-like border and padding to radio when `touch` is true.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| value | 
+
+Value of radio group when in controlled mode.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+
+### Radio selection
 
 The default checked state of the radio children should always be set using the `value` prop. Sometimes you may wish to use the `IressRadioGroup` as an "uncontrolled" component - for example, because you are using a third party form library that requires it. In this case, simply use `defaultValue` instead of `value`.
 
 **Note:** The `value` prop on the `IressRadioGroup` component will always override the `checked` state of the `IressRadio` children.
 
+[](./iframe.html?id=components-radiogroup--radio-selection)
+
 Google
 
 Newspaper
@@ -79,9 +292,7 @@ Friend
 
 Other
 
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+Hide codedrawOpen in CodeSandbox
 
 <IressRadioGroup defaultValue\="newspaper"\>
   <IressRadio value\="google"\>
@@ -94,9 +305,118 @@ Hide code
     Other  </IressRadio\>
 </IressRadioGroup\>
 
-Copy
+```
+
+#### Props
+
+IressRadioGroupIressRadio
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content of the radio group, usually multiple `IressRadio` components.
+
+ReactNode
+
+
+
+ | \- | \- |
+| defaultValue | 
+
+Initial value of radio group when in uncontrolled mode.
+
+FormControlValue
+
+
+
+ | \- | 
+
+"newspaper"
+
+ |
+| hiddenRadio | 
+
+Hides the radio control to allow the creation of custom radio buttons.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| layout | 
+
+Sets which of the block / inline layout options apply.
+
+union
+
+
+
+ | 
+
+'stack'
+
+ | Set object |
+| name | 
+
+Name to be applied to all radios in the group.
+
+string
+
 
-### [](#layout)Layout
+
+ | \- | Set string |
+| onChange | 
+
+Called when a user selects one of its children radio buttons. If you pass in a non-string value, you can access it using the second parameter of the function.
+
+( e: React.ChangeEvent<HTMLInputElement>, value?: FormControlValue, ) => void
+
+ | \- | \- |
+| readonly | 
+
+Renders a readonly radio group.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| required | 
+
+When true, marks the field as required
+
+boolean
+
+
+
+ | \- | Set boolean |
+| role | 
+
+ | 
+
+'radiogroup'
+
+ | Set object |
+| touch | 
+
+Add the button-like border and padding to radio when `touch` is true.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| value | 
+
+Value of radio group when in controlled mode.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+
+### Layout
 
 The layout prop controls how the radio group is displayed and can have three basic layouts:
 
@@ -111,6 +431,8 @@ Note:
 
 If using any of the inline\* props within a `Field` component, the `Field` also needs the inline prop to be set for the inline layouts to take effect.
 
+[](./iframe.html?id=components-radiogroup--layout)
+
 ### stack
 
 Google
@@ -161,9 +483,7 @@ Friend
 
 Other
 
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+Hide codedrawOpen in CodeSandbox
 
 <IressText className\="iress-u-stack iress--gutter--lg"\>
   <div\>
@@ -171,22 +491,22 @@ Hide code
       stack    </h3\>
     <IressRadioGroup layout\="stack"\>
       <IressRadio
-        className\="ids-styles--add-border-v5150"
+        className\="ids-styles--add-border-v5203"
         value\="google"
       \>
         Google      </IressRadio\>
       <IressRadio
-        className\="ids-styles--add-border-v5150"
+        className\="ids-styles--add-border-v5203"
         value\="newspaper"
       \>
         Newspaper      </IressRadio\>
       <IressRadio
-        className\="ids-styles--add-border-v5150"
+        className\="ids-styles--add-border-v5203"
         value\="friend"
       \>
         Friend      </IressRadio\>
       <IressRadio
-        className\="ids-styles--add-border-v5150"
+        className\="ids-styles--add-border-v5203"
         value\="other"
       \>
         Other      </IressRadio\>
@@ -197,22 +517,22 @@ Hide code
       block    </h3\>
     <IressRadioGroup layout\="block"\>
       <IressRadio
-        className\="ids-styles--add-border-v5150"
+        className\="ids-styles--add-border-v5203"
         value\="google"
       \>
         Google      </IressRadio\>
       <IressRadio
-        className\="ids-styles--add-border-v5150"
+        className\="ids-styles--add-border-v5203"
         value\="newspaper"
       \>
         Newspaper      </IressRadio\>
       <IressRadio
-        className\="ids-styles--add-border-v5150"
+        className\="ids-styles--add-border-v5203"
         value\="friend"
       \>
         Friend      </IressRadio\>
       <IressRadio
-        className\="ids-styles--add-border-v5150"
+        className\="ids-styles--add-border-v5203"
         value\="other"
       \>
         Other      </IressRadio\>
@@ -223,22 +543,22 @@ Hide code
       inline    </h3\>
     <IressRadioGroup layout\="inline"\>
       <IressRadio
-        className\="ids-styles--add-border-v5150"
+        className\="ids-styles--add-border-v5203"
         value\="google"
       \>
         Google      </IressRadio\>
       <IressRadio
-        className\="ids-styles--add-border-v5150"
+        className\="ids-styles--add-border-v5203"
         value\="newspaper"
       \>
         Newspaper      </IressRadio\>
       <IressRadio
-        className\="ids-styles--add-border-v5150"
+        className\="ids-styles--add-border-v5203"
         value\="friend"
       \>
         Friend      </IressRadio\>
       <IressRadio
-        className\="ids-styles--add-border-v5150"
+        className\="ids-styles--add-border-v5203"
         value\="other"
       \>
         Other      </IressRadio\>
@@ -249,22 +569,22 @@ Hide code
       inlineFlex    </h3\>
     <IressRadioGroup layout\="inlineFlex"\>
       <IressRadio
-        className\="ids-styles--add-border-v5150"
+        className\="ids-styles--add-border-v5203"
         value\="google"
       \>
         Google      </IressRadio\>
       <IressRadio
-        className\="ids-styles--add-border-v5150"
+        className\="ids-styles--add-border-v5203"
         value\="newspaper"
       \>
         Newspaper      </IressRadio\>
       <IressRadio
-        className\="ids-styles--add-border-v5150"
+        className\="ids-styles--add-border-v5203"
         value\="friend"
       \>
         Friend      </IressRadio\>
       <IressRadio
-        className\="ids-styles--add-border-v5150"
+        className\="ids-styles--add-border-v5203"
         value\="other"
       \>
         Other      </IressRadio\>
@@ -275,22 +595,22 @@ Hide code
       inlineEqualWidth    </h3\>
     <IressRadioGroup layout\="inlineEqualWidth"\>
       <IressRadio
-        className\="ids-styles--add-border-v5150"
+        className\="ids-styles--add-border-v5203"
         value\="google"
       \>
         Google      </IressRadio\>
       <IressRadio
-        className\="ids-styles--add-border-v5150"
+        className\="ids-styles--add-border-v5203"
         value\="newspaper"
       \>
         Newspaper      </IressRadio\>
       <IressRadio
-        className\="ids-styles--add-border-v5150"
+        className\="ids-styles--add-border-v5203"
         value\="friend"
       \>
         Friend      </IressRadio\>
       <IressRadio
-        className\="ids-styles--add-border-v5150"
+        className\="ids-styles--add-border-v5203"
         value\="other"
       \>
         Other      </IressRadio\>
@@ -298,14 +618,121 @@ Hide code
   </div\>
 </IressText\>
 
-Copy
+```
+
+#### Props
+
+IressRadioGroupIressRadio
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content of the radio group, usually multiple `IressRadio` components.
+
+ReactNode
+
+
+
+ | \- | \- |
+| defaultValue | 
+
+Initial value of radio group when in uncontrolled mode.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+| hiddenRadio | 
+
+Hides the radio control to allow the creation of custom radio buttons.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| layout | 
+
+Sets which of the block / inline layout options apply.
+
+union
+
+
+
+ | 
+
+'stack'
+
+ | \- |
+| name | 
+
+Name to be applied to all radios in the group.
+
+string
+
+
 
-### [](#hidden-radio-buttons)Hidden radio buttons
+ | \- | Set string |
+| onChange | 
+
+Called when a user selects one of its children radio buttons. If you pass in a non-string value, you can access it using the second parameter of the function.
+
+( e: React.ChangeEvent<HTMLInputElement>, value?: FormControlValue, ) => void
+
+ | \- | \- |
+| readonly | 
+
+Renders a readonly radio group.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| required | 
+
+When true, marks the field as required
+
+boolean
+
+
+
+ | \- | Set boolean |
+| role | 
+
+ | 
+
+'radiogroup'
+
+ | Set object |
+| touch | 
+
+Add the button-like border and padding to radio when `touch` is true.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| value | 
+
+Value of radio group when in controlled mode.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+
+### Hidden radio buttons
 
 You can use the `hiddenRadio` prop to create custom radio buttons. When enabled, the actual radio button will be visually hidden, allowing you to create more interesting controls. The checked state will be shown by the label's border, which is thicker when the radio button is checked.
 
 When `hiddenRadio` is enabled, the label will have no padding. Padding can be added by using a Panel or utility classes.
 
+[](./iframe.html?id=components-radiogroup--hidden-radio-buttons)
+
 **I'd like to discuss the following in my financial review:
 
 Select one option
@@ -318,9 +745,7 @@ Saving for a holiday
 
 Reducing my debt
 
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+Hide codedrawOpen in CodeSandbox
 
 <IressField
   hint\="Select one option"
@@ -392,14 +817,129 @@ Hide code
   </IressRadioGroup\>
 </IressField\>
 
-Copy
+```
 
-### [](#laying-out-custom-radio-buttons)Laying out custom radio buttons
+#### Props
+
+IressRadioGroupIressRadio
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content of the radio group, usually multiple `IressRadio` components.
+
+ReactNode
+
+
+
+ | \- | \- |
+| defaultValue | 
+
+Initial value of radio group when in uncontrolled mode.
+
+FormControlValue
+
+
+
+ | \- | 
+
+"home"
+
+ |
+| hiddenRadio | 
+
+Hides the radio control to allow the creation of custom radio buttons.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| layout | 
+
+Sets which of the block / inline layout options apply.
+
+union
+
+
+
+ | 
+
+'stack'
+
+ | 
+
+"inline"
+
+ |
+| name | 
+
+Name to be applied to all radios in the group.
+
+string
+
+
+
+ | \- | Set string |
+| onChange | 
+
+Called when a user selects one of its children radio buttons. If you pass in a non-string value, you can access it using the second parameter of the function.
+
+( e: React.ChangeEvent<HTMLInputElement>, value?: FormControlValue, ) => void
+
+ | \- | \- |
+| readonly | 
+
+Renders a readonly radio group.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| required | 
+
+When true, marks the field as required
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| role | 
+
+ | 
+
+'radiogroup'
+
+ | Set object |
+| touch | 
+
+Add the button-like border and padding to radio when `touch` is true.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| value | 
+
+Value of radio group when in controlled mode.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+
+### Laying out custom radio buttons
 
 The radio group's `layout` prop gives you some default options to help control the layout of your controls. But sometimes you need more granular control, which you can achieve with a bit of custom CSS.
 
 The example below uses CSS grid to give us evenly spaced / sized radio buttons, which will wrap on to new lines as the screen size reduces. The grid wrapper element is a div that wraps around the `<IressRadio />` elements, as shown by the dashed border. Use the grab handle in the bottom right-hand corner of the grid wrapper to see how the controls change size to respond to the container's width.
 
+[](./iframe.html?id=components-radiogroup--custom-radio-group-layout)
+
 **I'd like to discuss the following in my financial review:
 
 Select one option
@@ -422,9 +962,7 @@ Reducing my debt
 
 Starting a business
 
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+Hide codedrawOpen in CodeSandbox
 
 <IressField
   hint\="Select one option"
@@ -441,7 +979,7 @@ Hide code
     }}
   \>
     <div
-      className\="ids-styles--resizable-v5150"
+      className\="ids-styles--resizable-v5203"
       style\={{
         display: 'grid',
         gridAutoRows: '1fr',
@@ -607,19 +1145,128 @@ Hide code
   </IressRadioGroup\>
 </IressField\>
 
-Copy
+```
+
+#### Props
+
+IressRadioGroupIressRadio
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content of the radio group, usually multiple `IressRadio` components.
+
+ReactNode
+
+
+
+ | \- | \- |
+| defaultValue | 
+
+Initial value of radio group when in uncontrolled mode.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+| hiddenRadio | 
+
+Hides the radio control to allow the creation of custom radio buttons.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| layout | 
+
+Sets which of the block / inline layout options apply.
+
+union
+
+
+
+ | 
+
+'stack'
+
+ | 
+
+"block"
+
+ |
+| name | 
+
+Name to be applied to all radios in the group.
+
+string
+
+
+
+ | \- | financial-review |
+| onChange | 
+
+Called when a user selects one of its children radio buttons. If you pass in a non-string value, you can access it using the second parameter of the function.
+
+( e: React.ChangeEvent<HTMLInputElement>, value?: FormControlValue, ) => void
+
+ | \- | \- |
+| readonly | 
+
+Renders a readonly radio group.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| required | 
+
+When true, marks the field as required
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| role | 
+
+ | 
+
+'radiogroup'
+
+ | Set object |
+| touch | 
+
+Add the button-like border and padding to radio when `touch` is true.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| value | 
+
+Value of radio group when in controlled mode.
+
+FormControlValue
+
+
 
-### [](#readonly)Readonly
+ | \- | Set object |
+
+### Readonly
 
 The `readonly` prop changes how the radio group is rendered. It will only render if the children radio that is checked (alongside a hidden input that contains the `value` if it was set), otherwise it will not be rendered.
 
 It is understandable that this may not be the desired behavior for all use cases. If you need a radio group that is not editable, but still visible, simply do not set the `readonly` prop and set the `value` prop instead.
 
-Newspaper
+[](./iframe.html?id=components-radiogroup--readonly)
 
-Hide code
+Newspaper
 
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+Hide codedrawOpen in CodeSandbox
 
 <IressRadioGroup
   defaultValue\="newspaper"
@@ -635,12 +1282,123 @@ Hide code
     Other  </IressRadio\>
 </IressRadioGroup\>
 
-Copy
+```
+
+#### Props
+
+IressRadioGroupIressRadio
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content of the radio group, usually multiple `IressRadio` components.
+
+ReactNode
+
+
+
+ | \- | \- |
+| defaultValue | 
+
+Initial value of radio group when in uncontrolled mode.
+
+FormControlValue
+
+
+
+ | \- | 
+
+"newspaper"
+
+ |
+| hiddenRadio | 
+
+Hides the radio control to allow the creation of custom radio buttons.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| layout | 
+
+Sets which of the block / inline layout options apply.
+
+union
+
+
+
+ | 
+
+'stack'
+
+ | Set object |
+| name | 
+
+Name to be applied to all radios in the group.
+
+string
+
+
+
+ | \- | Set string |
+| onChange | 
+
+Called when a user selects one of its children radio buttons. If you pass in a non-string value, you can access it using the second parameter of the function.
+
+( e: React.ChangeEvent<HTMLInputElement>, value?: FormControlValue, ) => void
+
+ | \- | \- |
+| readonly | 
+
+Renders a readonly radio group.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| required | 
+
+When true, marks the field as required
+
+boolean
+
+
+
+ | \- | Set boolean |
+| role | 
+
+ | 
+
+'radiogroup'
+
+ | Set object |
+| touch | 
+
+Add the button-like border and padding to radio when `touch` is true.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| value | 
+
+Value of radio group when in controlled mode.
+
+FormControlValue
+
+
 
-### [](#touch)Touch
+ | \- | Set object |
+
+### Touch
 
 The `touch` prop adds the button-like border and padding to radio.
 
+[](./iframe.html?id=components-radiogroup--touch)
+
 Google
 
 Newspaper
@@ -649,9 +1407,7 @@ Friend
 
 Other
 
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+Hide codedrawOpen in CodeSandbox
 
 <IressRadioGroup
   defaultValue\="newspaper"
@@ -667,17 +1423,113 @@ Hide code
     Other  </IressRadio\>
 </IressRadioGroup\>
 
-Copy
+```
+
+#### Props
+
+IressRadioGroupIressRadio
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content of the radio group, usually multiple `IressRadio` components.
+
+ReactNode
+
+
+
+ | \- | \- |
+| defaultValue | 
+
+Initial value of radio group when in uncontrolled mode.
+
+FormControlValue
+
+
+
+ | \- | 
+
+"newspaper"
+
+ |
+| hiddenRadio | 
+
+Hides the radio control to allow the creation of custom radio buttons.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| layout | 
+
+Sets which of the block / inline layout options apply.
+
+union
+
+
+
+ | 
+
+'stack'
+
+ | Set object |
+| name | 
+
+Name to be applied to all radios in the group.
+
+string
+
+
+
+ | \- | Set string |
+| onChange | 
+
+Called when a user selects one of its children radio buttons. If you pass in a non-string value, you can access it using the second parameter of the function.
+
+( e: React.ChangeEvent<HTMLInputElement>, value?: FormControlValue, ) => void
+
+ | \- | \- |
+| readonly | 
+
+Renders a readonly radio group.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| required | 
+
+When true, marks the field as required
+
+boolean
+
+
+
+ | \- | Set boolean |
+| role | 
+
+ | 
+
+'radiogroup'
+
+ | Set object |
+| touch | 
+
+Add the button-like border and padding to radio when `touch` is true.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| value | 
+
+Value of radio group when in controlled mode.
+
+FormControlValue
+
 
-On this page
 
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Examples](#examples)
-    *   [Radio children](#radio-children)
-    *   [Radio selection](#radio-selection)
-    *   [Layout](#layout)
-    *   [Hidden radio buttons](#hidden-radio-buttons)
-    *   [Laying out custom radio buttons](#laying-out-custom-radio-buttons)
-    *   [Readonly](#readonly)
-    *   [Touch](#touch)
+ | \- | Set object |