@iress-oss/ids-mcp-server 6.0.0-alpha.0 → 6.0.0-alpha.1-canary-20251204014525-3f0dce4

package/generated/docs/components-input-docs.md

@@ -1,867 +0,0 @@
-[](#input)Input
-===============
-
-Overview
---------
-
-Inputs allow a user to input and interact with data. This component should be used as a child of the `IressField` component to ensure the correct placement of elements like label, error & hint text.
-
-* * *
-
-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.
-
-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; }
-
-<IressInput
-  append\=""
-  placeholder\="Enter your name"
-  prepend\=""
-/>
-
-Copy
-
-[](#props)Props
----------------
-
-| Name | Description | Default | Control |
-| --- | --- | --- | --- |
-| alignRight | 
-Set input content align to right, useful for numeric inputs.
-
-booleanundefined
-
-
-
- | 
-
-false
-
- | Set object |
-| append | 
-
-Content to append to the input field, usually a button or icon.
-
-ReactNode
-
-
-
- | \- | 
-
-""
-
- |
-| bg | 
-
-**`bg`** sets the background color of an element using the `background-color` css property using the color tokens in the design system.
-
-We recommend using the following token values for best background contrast:
-
-*   `colour.primary.fill` for primary backgrounds that need to stand out
-*   `colour.primary.surface` for primary backgrounds that need to be less prominent
-*   `colour.neutral.10` for the base background color, normally white in light mode or shade of grey in dark mode
-*   `colour.neutral.20` for a slightly darker background color, used in neutral state components
-*   `colour.system.danger.fill` for error backgrounds that need to stand out
-*   `colour.system.danger.surface` for error backgrounds that need to be less prominent
-*   `colour.system.success.fill` for success backgrounds that need to stand out
-*   `colour.system.success.surface` for success backgrounds that need to be less prominent
-*   `colour.system.warning.fill` for warning backgrounds that need to stand out
-*   `colour.system.warning.surface` for warning backgrounds that need to be less prominent
-*   `colour.system.info.fill` for info backgrounds that need to stand out
-*   `colour.system.info.surface` for info backgrounds that need to be less prominent
-
-"colorPalette""colour.primary.fill""colour.primary.fillHover""colour.primary.onFill""colour.primary.surface""colour.primary.surfaceHover""colour.primary.text"... 33 more ...Show 1 more...
-
-
-
- | \- | Set object |
-| borderRadius | 
-
-The **`border-radius`** CSS property rounds the corners of an element's outer border edge using the radius tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **4** | **4** | **5** | **12** | **9** |
-| 1 _\-x-_ |  | 3 _\-x-_ |  |  |
-
-"none" | "radius.000" | "radius.025" | "radius.050" | "radius.075" | "radius.100" | "radius.system.badge" | "radius.system.button" | "radius.system.form" | "radius.system.layout" | Partial<...> | undefined
-
- | \- | Set object |
-| clearable | 
-
-If `true`, then user can clear the value of the input. Will be ignored if `rows` prop is in use.
-
-booleanundefined
-
-
-
- | 
-
-false
-
- | Set object |
-| color | 
-
-The **`color`** CSS property sets the foreground color value of an element's text and text decorations using the colour tokens from the design system. It also sets the `currentcolor` value. `currentcolor` may be used as an indirect value on _other_ properties and is the default for other color properties, such as `border-color`.
-
-We recommend using the following token values for best color contrast:
-
-*   `colour.primary.onFill` used on top of `colour.primary.fill` for primary text that needs to stand out
-*   `colour.primary.text` used on top of `colour.primary.surface` or `colour.neutral.10` for primary text that needs to be less prominent
-*   `colour.neutral.70` used on top of `colour.neutral.10` or `colour.neutral.20` for muted text
-*   `colour.neutral.80` used on top of `colour.neutral.10` or `colour.neutral.20` for standard text
-*   `colour.system.danger.onFill` used on top of `colour.system.danger.fill` for error text that needs to stand out
-*   `colour.system.danger.text` used on top of `colour.system.danger.surface` for error text that needs to be less prominent
-*   `colour.system.success.onFill` used on top of `colour.system.success.fill` for success text that needs to stand out
-*   `colour.system.success.text` used on top of `colour.system.success.surface` for success text that needs to be less prominent
-*   `colour.system.warning.onFill` used on top of `colour.system.warning.fill` for warning text that needs to stand out
-*   `colour.system.warning.text` used on top of `colour.system.warning.surface` for warning text that needs to be less prominent
-*   `colour.system.info.onFill` used on top of `colour.system.info.fill` for informative text that needs to stand out
-*   `colour.system.info.text` used on top of `colour.system.info.surface` for informative text that needs to be less prominent
-
-"colorPalette""colour.primary.fill""colour.primary.fillHover""colour.primary.onFill""colour.primary.surface""colour.primary.surfaceHover""colour.primary.text"... 33 more ...Show 1 more...
-
-
-
- | \- | Set object |
-| defaultValue | 
-
-The value of the input. Can be a string or a number. Use for uncontrolled inputs.
-
-FormControlValueundefined
-
-
-
- | \- | Set object |
-| focusable | 
-
-The `focusable` prop is used to apply the focus elevation when focused. It can be set to `true` to apply focus styles on focus, or `'within'` to apply focus styles when the element or any of its children are focused.
-
-"true""within"undefined
-
-
-
- | \- | Set object |
-| formatter | 
-
-Bring your own formatter that will be used to format the value when the input is not focused, allowing you to display the value in a different format. e.g. User type in value="dsf 987kkk123" => result after formatter: $987,123 (string)
-
-((value?: T | undefined) => string | number) | undefined
-
- | \- | \- |
-| hide | 
-
-Set **`hide`** to hide an element completely using `display: none`. It can also be set to an object of breakpoints to hide the element at specific breakpoints.
-
-Hide on all breakpoints: `hide: true` Hide on specific breakpoints: `hide: { xs: false, sm: true, md: false, lg: true, xl: false, xxl: true }`
-
-Notes:
-
-*   If you need to hide an element but allow it to be visible to screen readers, use the `srOnly` prop instead.
-*   Consider if you can conditionally render the element instead of hiding it.
-
-boolean | Partial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", boolean>> | undefined
-
- | \- | Set object |
-| inline | 
-
-Make prepend/append element closer to the input content.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| layerStyle | 
-
-Elevate a layer by using a **`layerStyle`**. These are connected to the elevation tokens in the design system. They can be combined to create hierarchy and structure.
-
-*   `elevation.raised`: Raised elevations sit slightly higher than other content. They are reserved for cards that can be moved, such as Jira issue cards and Trello cards. In special circumstances, they can be used for cards as a way to provide additional heirarchy or emphasis.
-*   `elevation.floating`: Floating is the highest elevation available. It is reserved for a UI that sits over another UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons.
-*   `elevation.overflow`: Overflow is a shadow indicating content has scrolled outside a view. It can be used for vertical or horizontal scroll. An example of overflow shadows is the horizontal scroll in tables on a Confluence page.
-
-"elevation.raised" | "elevation.floating" | "elevation.overflow" | "elevation.focus" | "elevation.focusCompact" | Partial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", "elevation.raised" | ... 3 more ... | "elevation.focusCompact">> | undefined
-
- | \- | Set object |
-| loading | 
-
-The loading states of the input field. If provided a string, will use that text as the loading message.
-
-stringbooleanundefined
-
-
-
- | \- | Set object |
-| m | 
-
-The **`m`** property is short for `margin`, and sets the margin area on all four sides of an element.
-
-It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-"xs""sm""md""lg""xl""none""spacing.000""spacing.050"Show 9 more...
-
-
-
- | \- | Set object |
-| maxWidth | 
-
-The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **7** |
-
-"slider.tick""auto""container.xs""container.sm""container.md""container.lg""container.xl""container.xxl"Show 6 more...
-
-
-
- | \- | Set object |
-| mb | 
-
-The **`mb`** property is short for `margin-bottom` and sets the margin area on the bottom side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-
-It uses the spacing tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-"xs""sm""md""lg""xl""none""spacing.000""spacing.050"Show 9 more...
-
-
-
- | \- | Set object |
-| ml | 
-
-The **`ml`** property is short for `margin-left` and sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-
-It uses the spacing tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-"xs""sm""md""lg""xl""none""spacing.000""spacing.050"Show 9 more...
-
-
-
- | \- | Set object |
-| mr | 
-
-The **`mr`** property is short for `margin-right` and sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-
-It uses the spacing tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-"xs""sm""md""lg""xl""none""spacing.000""spacing.050"Show 9 more...
-
-
-
- | \- | Set object |
-| mt | 
-
-The **`mt`** property is short for `margin-top` and sets the margin area on the top side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-
-It uses the spacing tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-"xs""sm""md""lg""xl""none""spacing.000""spacing.050"Show 9 more...
-
-
-
- | \- | Set object |
-| mx | 
-
-The **`mx`** property is short for `margin-inline`. It is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
-
-It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-"xs""sm""md""lg""xl""none""spacing.000""spacing.050"Show 9 more...
-
-
-
- | \- | Set object |
-| my | 
-
-The **`my`** property is short for `margin-block`. It defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
-
-It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-"xs""sm""md""lg""xl""none""spacing.000""spacing.050"Show 9 more...
-
-
-
- | \- | Set object |
-| noGutter | 
-
-The **`noGutter`** property is used to remove the bottom margin from the last child of a component. This is useful when you want to avoid extra spacing at the end of a layout.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| onChange | 
-
-Emitted when the input value changes with the new changed value.
-
-((e: ChangeEvent<InputBaseElement<TRows>>, value?: T | undefined) => void) | undefined
-
- | \- | \- |
-| onClear | 
-
-Emitted when the input is manually cleared.
-
-((e: ChangeEvent<InputBaseElement<TRows>>) => void) | undefined
-
- | \- | \- |
-| p | 
-
-The **`p`** property is short for `padding`, and sets the padding area on all four sides of an element at once.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-"xs""sm""md""lg""xl""none""spacing.000""spacing.050"Show 9 more...
-
-
-
- | \- | Set object |
-| pb | 
-
-The **`pb`** property is short for `padding-bottom` and sets the padding area on the bottom side of an element.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-"xs""sm""md""lg""xl""none""spacing.000""spacing.050"Show 9 more...
-
-
-
- | \- | Set object |
-| pl | 
-
-The **`pl`** property is short for `padding-left` and sets the padding area on the left side of an element.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-"xs""sm""md""lg""xl""none""spacing.000""spacing.050"Show 9 more...
-
-
-
- | \- | Set object |
-| placeholder | 
-
-string
-
-
-
- | \- | Enter your name |
-| pr | 
-
-The **`pr`** property is short for `padding-right` and sets the padding area on the right side of an element.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-"xs""sm""md""lg""xl""none""spacing.000""spacing.050"Show 9 more...
-
-
-
- | \- | Set object |
-| prepend | 
-
-Content to prepended to the input field, usually an icon.
-
-ReactNode
-
-
-
- | \- | 
-
-""
-
- |
-| pt | 
-
-The **`pt`** property is short for `padding-top` and sets the padding area on the top side of an element.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-"xs""sm""md""lg""xl""none""spacing.000""spacing.050"Show 9 more...
-
-
-
- | \- | Set object |
-| px | 
-
-The **`px`** property is short for `padding-inline`. It is a shorthand property that defines both the logical inline start and end paddings of an element, which maps to physical paddings depending on the element's writing mode, directionality, and text orientation.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-"xs""sm""md""lg""xl""none""spacing.000""spacing.050"Show 9 more...
-
-
-
- | \- | Set object |
-| py | 
-
-The **`py`** property is short for `padding-block`. It defines the logical block start and end paddings of an element, which maps to physical paddings depending on the element's writing mode, directionality, and text orientation.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-"xs""sm""md""lg""xl""none""spacing.000""spacing.050"Show 9 more...
-
-
-
- | \- | Set object |
-| rowGap | 
-
-The **`row-gap`** CSS property sets the size of the gap (gutter) between an element's rows.
-
-Note: It only has an effect when used as a direct child of a layout component, such as IressRow, IressStack or IressInline.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **47** | **52** | **10.1** | **16** | No |
-
-"xs""sm""md""lg""xl""none""spacing.000""spacing.050"Show 9 more...
-
-
-
- | \- | Set object |
-| rows | 
-
-Number of rows in the `textarea` (when set the component renders a textarea element)
-
-numberundefined
-
-
-
- | \- | Set object |
-| srOnly | 
-
-Set **`srOnly`** to hide an element visually but still make it accessible to screen readers. It can also be set to an object of breakpoints to hide the element at specific breakpoints.
-
-Hide on all breakpoints: `srOnly: true` Hide on specific breakpoints: `srOnly: { xs: false, sm: true, md: false, lg: true, xl: false, xxl: true }`
-
-boolean | Partial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", boolean>> | undefined
-
- | \- | Set object |
-| stretch | 
-
-The **`stretch`** property is used to stretch an element to fill the available space in its parent container. It sets the `height` property to `100%` and `alignSelf` to `stretch`, allowing the element to expand and contract based on the size of its parent.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| textAlign | 
-
-The **`text-align`** CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-"center" | "left" | "right" | "inherit" | "justify" | Partial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", "center" | "left" | "right" | "inherit" | "justify">> | undefined
-
- | \- | Set object |
-| textStyle | 
-
-Select the typography to be used using the **`textStyle`** prop. These are connected to the typography tokens in the design system.'
-
-*   `typography.body.sm` - Use for small components such as badges and disclaimers, as well as compact variations of tables and lists.
-*   `typography.body.md` - The most commonly used body text size, used for most text content in the product and the default state of all components in the design system.
-*   `typography.body.lg` - Use for tag lines, subtitles, and other large text content in the product.
-*   `typography.heading.1` - Use for the main page title to establish a clear hierarchy. There is typically only one H1 per screen, emphasising the primary purpose or context of the page.
-*   `typography.heading.2` - Use for primary section headings within a page to organise content and guide the user through key areas. Also suitable for large components—such as modals—where space allows and where it pairs well with body.md or body.lg.
-*   `typography.heading.3` - Use for sub-sections under H2s to further structure content and maintain a clear visual hierarchy. Ideal for breaking down complex sections into manageable parts.
-*   `typography.heading.4` - Use for supporting headings within content blocks or small components where space is limited—such as table headers, cards, or side panels. Provides structure without overwhelming the layout.
-*   `typography.heading.5` - Use for minor labels or titles in compact UI elements, such as cards, sidebars, or inline labels. Best used to emphasise supplementary information without drawing too much attention. Works well with body.sm and is ideal for subtle content like fine print. Use sparingly to preserve typographic hierarchy.
-*   `typography.code` - Used to display code snippets in the product, such as in the API documentation.
-
-"typography.heading.1""typography.heading.2""typography.heading.3""typography.heading.4""typography.heading.5""typography.body.sm""typography.body.sm.regular"... 12 more ...Show 1 more...
-
-
-
- | \- | Set object |
-| value | 
-
-The value of the input. Can be a string or a number. Use for controlled inputs.
-
-FormControlValueundefined
-
-
-
- | \- | Set object |
-| width | 
-
-The width of the input.
-
-"2""4""6""8""10""12""16""25perc"Show 4 more...
-
-
-
- | \- | Set object |
-
-[](#examples)Examples
----------------------
-
-### [](#types)Types
-
-The input component's `type` can be set to one of the following value: `text` (default), `date`, `email`, `number`, `password`, `search`, `tel`, `url`, `time`, `color` and `file`.
-
-For more information about each type, please see the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types).
-
-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; }
-
-<IressStack gap\="md"\>
-  <IressInput
-    placeholder\="Text input"
-    type\="text"
-  />
-  <IressInput
-    placeholder\="Color input"
-    type\="color"
-  />
-  <IressInput
-    placeholder\="Date input"
-    type\="date"
-  />
-  <IressInput
-    placeholder\="Datetime-local input"
-    type\="datetime-local"
-  />
-  <IressInput
-    placeholder\="Email input"
-    type\="email"
-  />
-  <IressInput
-    placeholder\="File input"
-    type\="file"
-  />
-  <IressInput
-    placeholder\="Month input"
-    type\="month"
-  />
-  <IressInput
-    placeholder\="Number input"
-    type\="number"
-  />
-  <IressInput
-    placeholder\="Password input"
-    type\="password"
-  />
-  <IressInput
-    placeholder\="Search input"
-    type\="search"
-  />
-  <IressInput
-    placeholder\="Tel input"
-    type\="tel"
-  />
-  <IressInput
-    placeholder\="Time input"
-    type\="time"
-  />
-  <IressInput
-    placeholder\="Url input"
-    type\="url"
-  />
-  <IressInput
-    placeholder\="Week input"
-    type\="week"
-  />
-</IressStack\>
-
-Copy
-
-Hidden inputs
--------------
-
-If you need to use a hidden input in a form, you can use a native Input element with its `type` set to `hidden`. Remember to set the `name` attribute so it can be included in form submissions.
-
-### [](#input-modes)Input modes
-
-The `inputmode` attribute provides a hint to browsers for devices with onscreen keyboards (usually mobile devices) to help them decide which keyboard to display when a user has selected any input or textarea element.
-
-For more information about each mode (and their expected user experience), please see the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).
-
-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; }
-
-<IressStack gap\="md"\>
-  <IressInput
-    inputMode\="text"
-    placeholder\="Text mode, usually best used when type=&quot;text&quot; "
-  />
-  <IressInput
-    inputMode\="tel"
-    placeholder\="Tel mode, usually best used when type=&quot;tel&quot; "
-  />
-  <IressInput
-    inputMode\="url"
-    placeholder\="Url mode, usually best used when type=&quot;url&quot; "
-  />
-  <IressInput
-    inputMode\="email"
-    placeholder\="Email mode, usually best used when type=&quot;email&quot; "
-  />
-  <IressInput
-    inputMode\="numeric"
-    placeholder\="Numeric mode, usually best used when type=&quot;numeric&quot; "
-  />
-  <IressInput
-    inputMode\="decimal"
-    placeholder\="Decimal mode, usually best used when type=&quot;decimal&quot; "
-  />
-  <IressInput
-    inputMode\="search"
-    placeholder\="Search mode, usually best used when type=&quot;search&quot; "
-  />
-</IressStack\>
-
-Copy
-
-### [](#clearable)Clearable
-
-By setting the `clearable` prop to `true` a clear button will appear when the user has entered a value into the input.
-
-Clearing will set the focus on the input and trigger the `onClear` handler. Use this handler to clear the input value if your input is controlled.
-
-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; }
-
-<IressInput
-  clearable
-  placeholder\="Search"
-  prepend\={<IressIcon name\="search" />}
-/>
-
-Copy
-
-### [](#sizing)Sizing
-
-Inputs can be resized to suit a specific number of characters. This sets an expectation of what data a user has to enter; for example using the `Sixteen` width for a credit card number.
-
-The width in this case refers to the actual input and ensures that it is wide enough for a set number of characters. If you add any appended or prepended content, the overall size of the `IressInput` will increase.
-
-Widths can also be set as a percentage, allowing the input to take up a proportion of the width of its container. In this case, the width of the actual input decreases if you add appended or prepended content.
-
-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; }
-
-<IressStack gap\="md"\>
-  <IressInput
-    placeholder\="2"
-    width\="2"
-  />
-  <IressInput
-    placeholder\="4"
-    width\="4"
-  />
-  <IressInput
-    placeholder\="6"
-    width\="6"
-  />
-  <IressInput
-    placeholder\="8"
-    width\="8"
-  />
-  <IressInput
-    placeholder\="10"
-    width\="10"
-  />
-  <IressInput
-    placeholder\="12"
-    width\="12"
-  />
-  <IressInput
-    placeholder\="16"
-    width\="16"
-  />
-  <IressInput
-    placeholder\="25perc"
-    width\="25perc"
-  />
-  <IressInput
-    placeholder\="50perc"
-    width\="50perc"
-  />
-  <IressInput
-    placeholder\="75perc"
-    width\="75perc"
-  />
-  <IressInput
-    placeholder\="100perc"
-    width\="100perc"
-  />
-</IressStack\>
-
-Copy
-
-### [](#textareas)Textareas
-
-You can also use `IressInput` to render a `textarea` instead of an `input`. Simply set the rows prop to the number of lines of text you'd like to display. This will set the height of the `textarea`; if a user enters more lines of text than the number of rows, a scrollbar will be displayed.
-
-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; }
-
-<IressInput rows\={5} />
-
-Copy
-
-### [](#slot-props)Slot props
-
-Content (typically icons) can be added to slots (`append` and `prepend`) within the `IressInput` component.
-
-*   **Prepend**: appears before the input
-*   **Append**: appears after the input
-
-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; }
-
-<IressStack gap\="md"\>
-  <IressInput
-    placeholder\="Prepend slot"
-    prepend\={<IressIcon name\="search" />}
-  />
-  <IressInput
-    append\={<IressIcon name\="search" />}
-    placeholder\="Append slot"
-  />
-  <IressInput
-    placeholder\="Prepend slot"
-    prepend\={<IressIcon name\="search" />}
-  />
-  <IressInput
-    append\={<IressIcon name\="search" />}
-    placeholder\="Append slot"
-  />
-</IressStack\>
-
-Copy
-
-### [](#read-only)Read only
-
-The `readOnly` prop can be set to prevent the user from changing the value of the input. This will change the input to a custom read-only style and the user will not be able to interact with the input.
-
-If you need more control over the read-only state (for example, rendering a stylised version of the value), you can use the [`IressReadonly` component](?path=/docs/components-readonly--docs).
-
-Value
-
-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; }
-
-<IressInput
-  append\=""
-  placeholder\="Enter your name"
-  prepend\=""
-  readOnly
-  value\="Value"
-/>
-
-Copy
-
-### [](#formatter)Formatter
-
-`formatter` allows you to display the value in a different format when the input is not focused. A typical use case is to format a string with currency symbols and commas.
-
-This prop powers the `IressInputCurrency` component to allow friendly and consistent currency display in Iress products.
-
-**Notes:**
-
-*   When `formatter` is set, the `type` of the input is changed to `text` when not in focus. Keep this in mind when you are testing the component. If you have set the `type` to number and have set a `formatter`, the role of the input will be `textbox` when not in focus, but `spinbutton` when in focus.
-*   The value of the native input will be the formatted value, not the raw value. If you need the raw value, you can use the `onChange` prop to capture the raw value.
-
-The example below changes the value entered to uppercase when the input is not focused.
-
-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; }
-
-<IressInput
-  append\=""
-  formatter\={(value) \=> value ? value.toString().toUpperCase() : ""}
-  placeholder\="Enter a string and it will show in UPPERCASE when not focused, and show the raw value on focus"
-  prepend\=""
-/>
-
-Copy
-
-### [](#onchange-and-oninput)`onChange` and `onInput`
-
-As of version 5, the `onChange` and `onInput` events are now consistent with how React handles the events. This means that the `onChange` event will fire at the same time as `onInput`.
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Examples](#examples)
-    *   [Types](#types)
-    *   [Input modes](#input-modes)
-    *   [Clearable](#clearable)
-    *   [Sizing](#sizing)
-    *   [Textareas](#textareas)
-    *   [Slot props](#slot-props)
-    *   [Read only](#read-only)
-    *   [Formatter](#formatter)
-    *   [onChange and onInput](#onchange-and-oninput)