@iress-oss/ids-mcp-server 6.0.0-alpha.1-canary-20251204032753-fe18cab → 6.0.0-alpha.1-canary-20251204040305-3639454

package/generated/docs/components_components-radiogroup-docs.md

@@ -0,0 +1,1573 @@
+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.
+
+* * *
+
+Updated
+
+**Recently updated**
+
+This component has been recently updated with new props. The props have been marked as beta. Please tell us if there are any issues.
+
+[](./iframe.html?id=components-radiogroup--radio-children)
+
+Google
+
+Newspaper
+
+Friend
+
+Other
+
+```
+
+<IressRadioGroup\>
+  <IressRadio value\="google"\>
+    Google  </IressRadio\>
+  <IressRadio value\="newspaper"\>
+    Newspaper  </IressRadio\>
+  <IressRadio value\="friend"\>
+    Friend  </IressRadio\>
+  <IressRadio value\="other"\>
+    Other  </IressRadio\>
+</IressRadioGroup\>
+
+```
+
+Props
+-----
+
+IressRadioGroupIressRadio
+
+Tabs
+
+| 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.
+
+T
+
+
+
+ | \- | 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'
+
+ | 
+
+stackblockinlineinlineFlexinlineEqualWidth
+
+ |
+| 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: ChangeEvent<HTMLInputElement>, value?: T) => 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.
+
+T
+
+
+
+ | \- | 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
+
+Friend
+
+Other
+
+```
+
+<IressRadioGroup\>
+  <IressRadio value\="google"\>
+    Google  </IressRadio\>
+  <IressRadio value\="newspaper"\>
+    Newspaper  </IressRadio\>
+  <IressRadio value\="friend"\>
+    Friend  </IressRadio\>
+  <IressRadio value\="other"\>
+    Other  </IressRadio\>
+</IressRadioGroup\>
+
+```
+
+#### Props
+
+IressRadioGroupIressRadio
+
+Tabs
+
+| 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.
+
+T
+
+
+
+ | \- | 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'
+
+ | 
+
+stackblockinlineinlineFlexinlineEqualWidth
+
+ |
+| 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: ChangeEvent<HTMLInputElement>, value?: T) => 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.
+
+T
+
+
+
+ | \- | 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
+
+Friend
+
+Other
+
+```
+
+<IressRadioGroup defaultValue\="newspaper"\>
+  <IressRadio value\="google"\>
+    Google  </IressRadio\>
+  <IressRadio value\="newspaper"\>
+    Newspaper  </IressRadio\>
+  <IressRadio value\="friend"\>
+    Friend  </IressRadio\>
+  <IressRadio value\="other"\>
+    Other  </IressRadio\>
+</IressRadioGroup\>
+
+```
+
+#### Props
+
+IressRadioGroupIressRadio
+
+Tabs
+
+| 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.
+
+T
+
+
+
+ | \- | 
+
+"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'
+
+ | 
+
+stackblockinlineinlineFlexinlineEqualWidth
+
+ |
+| 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: ChangeEvent<HTMLInputElement>, value?: T) => 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.
+
+T
+
+
+
+ | \- | Set object |
+
+### Layout
+
+The layout prop controls how the radio group is displayed and can have three basic layouts:
+
+*   **stack (Default):** Radio buttons are laid out vertically. Labels are only as wide as their text.
+*   **block:** Same as Stack, but labels take up the full width of the container.
+*   **inline:** Radio buttons are laid out horizontally. Labels are only as wide as their text.
+*   **inlineFlex:** Radio buttons are laid out horizontally. The container is only as wide as its contents.
+*   **inlineEqualWidth:** Radio buttons are laid out horizontally. Labels take up an equal amount of space in the container.
+
+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)
+
+### block (default)
+
+Google
+
+Newspaper
+
+Friend
+
+Other
+
+### inline
+
+Google
+
+Newspaper
+
+Friend
+
+Other
+
+### inlineEqualWidth
+
+Google
+
+Newspaper
+
+Friend
+
+Other
+
+### inlineFlex
+
+Google
+
+Newspaper
+
+Friend
+
+Other
+
+### stack
+
+Google
+
+Newspaper
+
+Friend
+
+Other
+
+```
+
+<IressStack gap\="md"\>
+  <IressText\>
+    <h3\>
+      block (default)    </h3\>
+    <IressRadioGroup layout\="block"\>
+      <IressRadio
+        layerStyle\="elevation.raised"
+        value\="google"
+      \>
+        Google      </IressRadio\>
+      <IressRadio
+        layerStyle\="elevation.raised"
+        value\="newspaper"
+      \>
+        Newspaper      </IressRadio\>
+      <IressRadio
+        layerStyle\="elevation.raised"
+        value\="friend"
+      \>
+        Friend      </IressRadio\>
+      <IressRadio
+        layerStyle\="elevation.raised"
+        value\="other"
+      \>
+        Other      </IressRadio\>
+    </IressRadioGroup\>
+  </IressText\>
+  <IressText\>
+    <h3\>
+      inline    </h3\>
+    <IressRadioGroup layout\="inline"\>
+      <IressRadio
+        layerStyle\="elevation.raised"
+        value\="google"
+      \>
+        Google      </IressRadio\>
+      <IressRadio
+        layerStyle\="elevation.raised"
+        value\="newspaper"
+      \>
+        Newspaper      </IressRadio\>
+      <IressRadio
+        layerStyle\="elevation.raised"
+        value\="friend"
+      \>
+        Friend      </IressRadio\>
+      <IressRadio
+        layerStyle\="elevation.raised"
+        value\="other"
+      \>
+        Other      </IressRadio\>
+    </IressRadioGroup\>
+  </IressText\>
+  <IressText\>
+    <h3\>
+      inlineEqualWidth    </h3\>
+    <IressRadioGroup layout\="inlineEqualWidth"\>
+      <IressRadio
+        layerStyle\="elevation.raised"
+        value\="google"
+      \>
+        Google      </IressRadio\>
+      <IressRadio
+        layerStyle\="elevation.raised"
+        value\="newspaper"
+      \>
+        Newspaper      </IressRadio\>
+      <IressRadio
+        layerStyle\="elevation.raised"
+        value\="friend"
+      \>
+        Friend      </IressRadio\>
+      <IressRadio
+        layerStyle\="elevation.raised"
+        value\="other"
+      \>
+        Other      </IressRadio\>
+    </IressRadioGroup\>
+  </IressText\>
+  <IressText\>
+    <h3\>
+      inlineFlex    </h3\>
+    <IressRadioGroup layout\="inlineFlex"\>
+      <IressRadio
+        layerStyle\="elevation.raised"
+        value\="google"
+      \>
+        Google      </IressRadio\>
+      <IressRadio
+        layerStyle\="elevation.raised"
+        value\="newspaper"
+      \>
+        Newspaper      </IressRadio\>
+      <IressRadio
+        layerStyle\="elevation.raised"
+        value\="friend"
+      \>
+        Friend      </IressRadio\>
+      <IressRadio
+        layerStyle\="elevation.raised"
+        value\="other"
+      \>
+        Other      </IressRadio\>
+    </IressRadioGroup\>
+  </IressText\>
+  <IressText\>
+    <h3\>
+      stack    </h3\>
+    <IressRadioGroup layout\="stack"\>
+      <IressRadio
+        layerStyle\="elevation.raised"
+        value\="google"
+      \>
+        Google      </IressRadio\>
+      <IressRadio
+        layerStyle\="elevation.raised"
+        value\="newspaper"
+      \>
+        Newspaper      </IressRadio\>
+      <IressRadio
+        layerStyle\="elevation.raised"
+        value\="friend"
+      \>
+        Friend      </IressRadio\>
+      <IressRadio
+        layerStyle\="elevation.raised"
+        value\="other"
+      \>
+        Other      </IressRadio\>
+    </IressRadioGroup\>
+  </IressText\>
+</IressStack\>
+
+```
+
+#### Props
+
+IressRadioGroupIressRadio
+
+Tabs
+
+| 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.
+
+T
+
+
+
+ | \- | 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
+
+
+
+ | \- | 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: ChangeEvent<HTMLInputElement>, value?: T) => 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.
+
+T
+
+
+
+ | \- | 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
+
+Buying my first home
+
+Saving for a holiday
+
+Reducing my debt
+
+```
+
+<IressField
+  hint\="Select one option"
+  label\="I'd like to discuss the following in my financial review:"
+\>
+  <IressRadioGroup
+    defaultValue\="home"
+    hiddenRadio
+    layout\="inline"
+    required
+  \>
+    <IressRadio value\="home"\>
+      <IressPanel
+        bg\="transparent"
+        p\="lg"
+        textAlign\="center"
+      \>
+        <IressStack gap\="md"\>
+          <IressIcon
+            name\="house"
+            textStyle\="typography.heading.1"
+          />
+          <IressText
+            noGutter
+            textStyle\="typography.heading.4"
+          \>
+            Buying my first home          </IressText\>
+        </IressStack\>
+      </IressPanel\>
+    </IressRadio\>
+    <IressRadio value\="holiday"\>
+      <IressPanel
+        bg\="transparent"
+        p\="lg"
+        textAlign\="center"
+      \>
+        <IressStack gap\="md"\>
+          <IressIcon
+            name\="mountain"
+            textStyle\="typography.heading.1"
+          />
+          <IressText
+            noGutter
+            textStyle\="typography.heading.4"
+          \>
+            Saving for a holiday          </IressText\>
+        </IressStack\>
+      </IressPanel\>
+    </IressRadio\>
+    <IressRadio value\="debt"\>
+      <IressPanel
+        bg\="transparent"
+        p\="lg"
+        textAlign\="center"
+      \>
+        <IressStack gap\="md"\>
+          <IressIcon
+            name\="credit-card"
+            textStyle\="typography.heading.1"
+          />
+          <IressText
+            noGutter
+            textStyle\="typography.heading.4"
+          \>
+            Reducing my debt          </IressText\>
+        </IressStack\>
+      </IressPanel\>
+    </IressRadio\>
+  </IressRadioGroup\>
+</IressField\>
+
+```
+
+#### Props
+
+IressRadioGroupIressRadio
+
+Tabs
+
+| 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.
+
+T
+
+
+
+ | \- | 
+
+"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'
+
+ | 
+
+stackblockinlineinlineFlexinlineEqualWidth
+
+ |
+| 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: ChangeEvent<HTMLInputElement>, value?: T) => 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.
+
+T
+
+
+
+ | \- | 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
+
+Retirement
+
+Buying my first home
+
+Saving for a holiday
+
+Saving for my child's education
+
+Saving for emergency
+
+Spending more time on my hobbies
+
+Reducing my debt
+
+Starting a business
+
+```
+
+<IressField
+  hint\="Select one option"
+  label\="I'd like to discuss the following in my financial review:"
+\>
+  <IressRadioGroup
+    hiddenRadio
+    layout\="block"
+    name\="financial-review"
+    required
+  \>
+    <div
+      style\={{
+        border: '1px dashed hsl(43deg 100% 45%)',
+        display: 'grid',
+        gridAutoRows: '1fr',
+        gridGap: '0.75rem',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
+        overflow: 'auto',
+        padding: '0.5rem',
+        resize: 'horizontal',
+        width: '100%'
+      }}
+    \>
+      <IressRadio value\="retirement"\>
+        <IressPanel
+          bg\="transparent"
+          p\="lg"
+          textAlign\="center"
+        \>
+          <IressStack gap\="md"\>
+            <IressIcon
+              name\="tree-palm"
+              textStyle\="typography.heading.1"
+            />
+            <IressText
+              noGutter
+              textStyle\="typography.heading.4"
+            \>
+              Retirement            </IressText\>
+          </IressStack\>
+        </IressPanel\>
+      </IressRadio\>
+      <IressRadio value\="home"\>
+        <IressPanel
+          bg\="transparent"
+          p\="lg"
+          textAlign\="center"
+        \>
+          <IressStack gap\="md"\>
+            <IressIcon
+              name\="house"
+              textStyle\="typography.heading.1"
+            />
+            <IressText
+              noGutter
+              textStyle\="typography.heading.4"
+            \>
+              Buying my first home            </IressText\>
+          </IressStack\>
+        </IressPanel\>
+      </IressRadio\>
+      <IressRadio value\="holiday"\>
+        <IressPanel
+          bg\="transparent"
+          p\="lg"
+          textAlign\="center"
+        \>
+          <IressStack gap\="md"\>
+            <IressIcon
+              name\="mountain"
+              textStyle\="typography.heading.1"
+            />
+            <IressText
+              noGutter
+              textStyle\="typography.heading.4"
+            \>
+              Saving for a holiday            </IressText\>
+          </IressStack\>
+        </IressPanel\>
+      </IressRadio\>
+      <IressRadio value\="education"\>
+        <IressPanel
+          bg\="transparent"
+          p\="lg"
+          textAlign\="center"
+        \>
+          <IressStack gap\="md"\>
+            <IressIcon
+              name\="graduation-cap"
+              textStyle\="typography.heading.1"
+            />
+            <IressText
+              noGutter
+              textStyle\="typography.heading.4"
+            \>
+              Saving for my child's education            </IressText\>
+          </IressStack\>
+        </IressPanel\>
+      </IressRadio\>
+      <IressRadio value\="emergency"\>
+        <IressPanel
+          bg\="transparent"
+          p\="lg"
+          textAlign\="center"
+        \>
+          <IressStack gap\="md"\>
+            <IressIcon
+              name\="medkit"
+              textStyle\="typography.heading.1"
+            />
+            <IressText
+              noGutter
+              textStyle\="typography.heading.4"
+            \>
+              Saving for emergency            </IressText\>
+          </IressStack\>
+        </IressPanel\>
+      </IressRadio\>
+      <IressRadio value\="hobby"\>
+        <IressPanel
+          bg\="transparent"
+          p\="lg"
+          textAlign\="center"
+        \>
+          <IressStack gap\="md"\>
+            <IressIcon
+              name\="bicycle"
+              textStyle\="typography.heading.1"
+            />
+            <IressText
+              noGutter
+              textStyle\="typography.heading.4"
+            \>
+              Spending more time on my hobbies            </IressText\>
+          </IressStack\>
+        </IressPanel\>
+      </IressRadio\>
+      <IressRadio value\="debt"\>
+        <IressPanel
+          bg\="transparent"
+          p\="lg"
+          textAlign\="center"
+        \>
+          <IressStack gap\="md"\>
+            <IressIcon
+              name\="chart-line-down"
+              textStyle\="typography.heading.1"
+            />
+            <IressText
+              noGutter
+              textStyle\="typography.heading.4"
+            \>
+              Reducing my debt            </IressText\>
+          </IressStack\>
+        </IressPanel\>
+      </IressRadio\>
+      <IressRadio value\="business"\>
+        <IressPanel
+          bg\="transparent"
+          p\="lg"
+          textAlign\="center"
+        \>
+          <IressStack gap\="md"\>
+            <IressIcon
+              name\="user-tie"
+              textStyle\="typography.heading.1"
+            />
+            <IressText
+              noGutter
+              textStyle\="typography.heading.4"
+            \>
+              Starting a business            </IressText\>
+          </IressStack\>
+        </IressPanel\>
+      </IressRadio\>
+    </div\>
+  </IressRadioGroup\>
+</IressField\>
+
+```
+
+#### Props
+
+IressRadioGroupIressRadio
+
+Tabs
+
+| 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.
+
+T
+
+
+
+ | \- | 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'
+
+ | 
+
+stackblockinlineinlineFlexinlineEqualWidth
+
+ |
+| 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: ChangeEvent<HTMLInputElement>, value?: T) => 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.
+
+T
+
+
+
+ | \- | Set object |
+
+### Read only
+
+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.
+
+[](./iframe.html?id=components-radiogroup--read-only)
+
+Newspaper
+
+```
+
+<IressRadioGroup
+  defaultValue\="newspaper"
+  readOnly
+\>
+  <IressRadio value\="google"\>
+    Google  </IressRadio\>
+  <IressRadio value\="newspaper"\>
+    Newspaper  </IressRadio\>
+  <IressRadio value\="friend"\>
+    Friend  </IressRadio\>
+  <IressRadio value\="other"\>
+    Other  </IressRadio\>
+</IressRadioGroup\>
+
+```
+
+#### Props
+
+IressRadioGroupIressRadio
+
+Tabs
+
+| 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.
+
+T
+
+
+
+ | \- | 
+
+"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'
+
+ | 
+
+stackblockinlineinlineFlexinlineEqualWidth
+
+ |
+| 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: ChangeEvent<HTMLInputElement>, value?: T) => 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.
+
+T
+
+
+
+ | \- | Set object |
+
+### Touch
+
+The `touch` prop adds the button-like border and padding to radio.
+
+[](./iframe.html?id=components-radiogroup--touch)
+
+Google
+
+Newspaper
+
+Friend
+
+Other
+
+```
+
+<IressRadioGroup
+  defaultValue\="newspaper"
+  touch
+\>
+  <IressRadio value\="google"\>
+    Google  </IressRadio\>
+  <IressRadio value\="newspaper"\>
+    Newspaper  </IressRadio\>
+  <IressRadio value\="friend"\>
+    Friend  </IressRadio\>
+  <IressRadio value\="other"\>
+    Other  </IressRadio\>
+</IressRadioGroup\>
+
+```
+
+#### Props
+
+IressRadioGroupIressRadio
+
+Tabs
+
+| 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.
+
+T
+
+
+
+ | \- | 
+
+"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'
+
+ | 
+
+stackblockinlineinlineFlexinlineEqualWidth
+
+ |
+| 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: ChangeEvent<HTMLInputElement>, value?: T) => 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.
+
+T
+
+
+
+ | \- | Set object |