@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-input-docs.md

@@ -0,0 +1,1388 @@
+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.
+
+[](./iframe.html?id=components-input--default)
+
+```
+
+<IressInput
+  append\=""
+  placeholder\="Enter your name"
+  prepend\=""
+/>
+
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alignRight | 
+Set input content align to right, useful for numeric inputs.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| append | 
+
+Content to append to the input field, usually a button or icon.
+
+ReactNode
+
+
+
+ | \- | 
+
+""
+
+ |
+| clearable | 
+
+If `true`, then user can clear the value of the input. Will be ignored if `rows` prop is in use.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| defaultValue | 
+
+The value of the input. Can be a string or a number. Use for uncontrolled inputs.
+
+T
+
+
+
+ | \- | 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) => string | number
+
+ | \- | \- |
+| inline | 
+
+Make prepend/append element closer to the input content.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| loading | 
+
+The loading states of the input field. If provided a string, will use that text as the loading message.
+
+union
+
+
+
+ | \- | Set object |
+| onChange | 
+
+Emitted when the input value changes with the new changed value.
+
+(e: ChangeEvent<InputBaseElement<TRows>>, value?: T) => void
+
+ | \- | \- |
+| onClear | 
+
+Emitted when the input is manually cleared.
+
+(e: ChangeEvent<InputBaseElement<TRows>>) => void
+
+ | \- | \- |
+| placeholder | 
+
+string
+
+
+
+ | \- | Enter your name |
+| prepend | 
+
+Content to prepended to the input field, usually an icon.
+
+ReactNode
+
+
+
+ | \- | 
+
+""
+
+ |
+| value | 
+
+The value of the input. Can be a string or a number. Use for controlled inputs.
+
+T
+
+
+
+ | \- | Set object |
+| width | 
+
+The width of the input.
+
+FormElementWidths
+
+
+
+ | \- | Set object |
+
+Examples
+--------
+
+### 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).
+
+[](./iframe.html?id=components-input--types)
+
+```
+
+<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\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alignRight | 
+Set input content align to right, useful for numeric inputs.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| append | 
+
+Content to append to the input field, usually a button or icon.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| clearable | 
+
+If `true`, then user can clear the value of the input. Will be ignored if `rows` prop is in use.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| defaultValue | 
+
+The value of the input. Can be a string or a number. Use for uncontrolled inputs.
+
+T
+
+
+
+ | \- | 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) => string | number
+
+ | \- | \- |
+| inline | 
+
+Make prepend/append element closer to the input content.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| loading | 
+
+The loading states of the input field. If provided a string, will use that text as the loading message.
+
+union
+
+
+
+ | \- | Set object |
+| onChange | 
+
+Emitted when the input value changes with the new changed value.
+
+(e: ChangeEvent<InputBaseElement<TRows>>, value?: T) => void
+
+ | \- | \- |
+| onClear | 
+
+Emitted when the input is manually cleared.
+
+(e: ChangeEvent<InputBaseElement<TRows>>) => void
+
+ | \- | \- |
+| prepend | 
+
+Content to prepended to the input field, usually an icon.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| type | 
+
+\-
+
+ | \- | \- |
+| value | 
+
+The value of the input. Can be a string or a number. Use for controlled inputs.
+
+T
+
+
+
+ | \- | Set object |
+| width | 
+
+The width of the input.
+
+FormElementWidths
+
+
+
+ | \- | Set object |
+
+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
+
+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).
+
+[](./iframe.html?id=components-input--input-modes)
+
+```
+
+<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\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alignRight | 
+Set input content align to right, useful for numeric inputs.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| append | 
+
+Content to append to the input field, usually a button or icon.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| clearable | 
+
+If `true`, then user can clear the value of the input. Will be ignored if `rows` prop is in use.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| defaultValue | 
+
+The value of the input. Can be a string or a number. Use for uncontrolled inputs.
+
+T
+
+
+
+ | \- | 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) => string | number
+
+ | \- | \- |
+| inline | 
+
+Make prepend/append element closer to the input content.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| inputMode | 
+
+\-
+
+ | \- | \- |
+| loading | 
+
+The loading states of the input field. If provided a string, will use that text as the loading message.
+
+union
+
+
+
+ | \- | Set object |
+| onChange | 
+
+Emitted when the input value changes with the new changed value.
+
+(e: ChangeEvent<InputBaseElement<TRows>>, value?: T) => void
+
+ | \- | \- |
+| onClear | 
+
+Emitted when the input is manually cleared.
+
+(e: ChangeEvent<InputBaseElement<TRows>>) => void
+
+ | \- | \- |
+| prepend | 
+
+Content to prepended to the input field, usually an icon.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| value | 
+
+The value of the input. Can be a string or a number. Use for controlled inputs.
+
+T
+
+
+
+ | \- | Set object |
+| width | 
+
+The width of the input.
+
+FormElementWidths
+
+
+
+ | \- | Set object |
+
+### 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.
+
+[](./iframe.html?id=components-input--clearable)
+
+```
+
+<IressInput
+  clearable
+  placeholder\="Search"
+  prepend\={<IressIcon name\="search" />}
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alignRight | 
+Set input content align to right, useful for numeric inputs.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| append | 
+
+Content to append to the input field, usually a button or icon.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| clearable | 
+
+If `true`, then user can clear the value of the input. Will be ignored if `rows` prop is in use.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| defaultValue | 
+
+The value of the input. Can be a string or a number. Use for uncontrolled inputs.
+
+T
+
+
+
+ | \- | 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) => string | number
+
+ | \- | \- |
+| inline | 
+
+Make prepend/append element closer to the input content.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| loading | 
+
+The loading states of the input field. If provided a string, will use that text as the loading message.
+
+union
+
+
+
+ | \- | Set object |
+| onChange | 
+
+Emitted when the input value changes with the new changed value.
+
+(e: ChangeEvent<InputBaseElement<TRows>>, value?: T) => void
+
+ | \- | \- |
+| onClear | 
+
+Emitted when the input is manually cleared.
+
+(e: ChangeEvent<InputBaseElement<TRows>>) => void
+
+ | \- | \- |
+| placeholder | 
+
+string
+
+
+
+ | \- | Search |
+| prepend | 
+
+Content to prepended to the input field, usually an icon.
+
+ReactNode
+
+
+
+ | \- | 
+
+RAW
+
+prepend :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type : ({ className, fixedWidth, flip, name, rotate, screenreaderText, set = "fal", spin, ...restProps }) => { const prefix = "fa-"; const classes = icon({ flip, rotate, spin }); return /\* @\_\_PURE\_\_ \*/ jsxDEV( styled.span, { role: "img", className: cx( classes, GlobalCSSClass.Icon, set, \`${prefix}${name}\`, fixedWidth && "fa-fw", className ), "aria-hidden": !screenreaderText && "true", "aria-label": screenreaderText, ...restProps }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Icon/Icon.tsx", lineNumber: 67, columnNumber: 5 }, this ); }
+*   key : null
+*   props :
+    
+    {...} 1 key
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| value | 
+
+The value of the input. Can be a string or a number. Use for controlled inputs.
+
+T
+
+
+
+ | \- | Set object |
+| width | 
+
+The width of the input.
+
+FormElementWidths
+
+
+
+ | \- | Set object |
+
+### 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.
+
+[](./iframe.html?id=components-input--sizing)
+
+```
+
+<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\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alignRight | 
+Set input content align to right, useful for numeric inputs.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| append | 
+
+Content to append to the input field, usually a button or icon.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| clearable | 
+
+If `true`, then user can clear the value of the input. Will be ignored if `rows` prop is in use.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| defaultValue | 
+
+The value of the input. Can be a string or a number. Use for uncontrolled inputs.
+
+T
+
+
+
+ | \- | 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) => string | number
+
+ | \- | \- |
+| inline | 
+
+Make prepend/append element closer to the input content.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| loading | 
+
+The loading states of the input field. If provided a string, will use that text as the loading message.
+
+union
+
+
+
+ | \- | Set object |
+| onChange | 
+
+Emitted when the input value changes with the new changed value.
+
+(e: ChangeEvent<InputBaseElement<TRows>>, value?: T) => void
+
+ | \- | \- |
+| onClear | 
+
+Emitted when the input is manually cleared.
+
+(e: ChangeEvent<InputBaseElement<TRows>>) => void
+
+ | \- | \- |
+| prepend | 
+
+Content to prepended to the input field, usually an icon.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| value | 
+
+The value of the input. Can be a string or a number. Use for controlled inputs.
+
+T
+
+
+
+ | \- | Set object |
+| width | 
+
+The width of the input.
+
+FormElementWidths
+
+
+
+ | \- | \- |
+
+### 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.
+
+[](./iframe.html?id=components-input--text-areas)
+
+```
+
+<IressInput rows\={5} />
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alignRight | 
+Set input content align to right, useful for numeric inputs.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| append | 
+
+Content to append to the input field, usually a button or icon.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| clearable | 
+
+If `true`, then user can clear the value of the input. Will be ignored if `rows` prop is in use.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| defaultValue | 
+
+The value of the input. Can be a string or a number. Use for uncontrolled inputs.
+
+T
+
+
+
+ | \- | 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) => string | number
+
+ | \- | \- |
+| inline | 
+
+Make prepend/append element closer to the input content.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| loading | 
+
+The loading states of the input field. If provided a string, will use that text as the loading message.
+
+union
+
+
+
+ | \- | Set object |
+| onChange | 
+
+Emitted when the input value changes with the new changed value.
+
+(e: ChangeEvent<InputBaseElement<TRows>>, value?: T) => void
+
+ | \- | \- |
+| onClear | 
+
+Emitted when the input is manually cleared.
+
+(e: ChangeEvent<InputBaseElement<TRows>>) => void
+
+ | \- | \- |
+| prepend | 
+
+Content to prepended to the input field, usually an icon.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| rows | 
+
+number
+
+
+
+ | \- |  |
+| value | 
+
+The value of the input. Can be a string or a number. Use for controlled inputs.
+
+T
+
+
+
+ | \- | Set object |
+| width | 
+
+The width of the input.
+
+FormElementWidths
+
+
+
+ | \- | Set object |
+
+### 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
+
+[](./iframe.html?id=components-input--slots)
+
+```
+
+<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\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alignRight | 
+Set input content align to right, useful for numeric inputs.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| append | 
+
+Content to append to the input field, usually a button or icon.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| clearable | 
+
+If `true`, then user can clear the value of the input. Will be ignored if `rows` prop is in use.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| defaultValue | 
+
+The value of the input. Can be a string or a number. Use for uncontrolled inputs.
+
+T
+
+
+
+ | \- | 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) => string | number
+
+ | \- | \- |
+| inline | 
+
+Make prepend/append element closer to the input content.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| loading | 
+
+The loading states of the input field. If provided a string, will use that text as the loading message.
+
+union
+
+
+
+ | \- | Set object |
+| onChange | 
+
+Emitted when the input value changes with the new changed value.
+
+(e: ChangeEvent<InputBaseElement<TRows>>, value?: T) => void
+
+ | \- | \- |
+| onClear | 
+
+Emitted when the input is manually cleared.
+
+(e: ChangeEvent<InputBaseElement<TRows>>) => void
+
+ | \- | \- |
+| prepend | 
+
+Content to prepended to the input field, usually an icon.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| value | 
+
+The value of the input. Can be a string or a number. Use for controlled inputs.
+
+T
+
+
+
+ | \- | Set object |
+| width | 
+
+The width of the input.
+
+FormElementWidths
+
+
+
+ | \- | Set object |
+
+### 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).
+
+[](./iframe.html?id=components-input--read-only)
+
+Value
+
+```
+
+<IressInput
+  append\=""
+  placeholder\="Enter your name"
+  prepend\=""
+  readOnly
+  value\="Value"
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alignRight | 
+Set input content align to right, useful for numeric inputs.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| append | 
+
+Content to append to the input field, usually a button or icon.
+
+ReactNode
+
+
+
+ | \- | 
+
+""
+
+ |
+| clearable | 
+
+If `true`, then user can clear the value of the input. Will be ignored if `rows` prop is in use.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| defaultValue | 
+
+The value of the input. Can be a string or a number. Use for uncontrolled inputs.
+
+T
+
+
+
+ | \- | 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) => string | number
+
+ | \- | \- |
+| inline | 
+
+Make prepend/append element closer to the input content.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| loading | 
+
+The loading states of the input field. If provided a string, will use that text as the loading message.
+
+union
+
+
+
+ | \- | Set object |
+| onChange | 
+
+Emitted when the input value changes with the new changed value.
+
+(e: ChangeEvent<InputBaseElement<TRows>>, value?: T) => void
+
+ | \- | \- |
+| onClear | 
+
+Emitted when the input is manually cleared.
+
+(e: ChangeEvent<InputBaseElement<TRows>>) => void
+
+ | \- | \- |
+| placeholder | 
+
+string
+
+
+
+ | \- | Enter your name |
+| prepend | 
+
+Content to prepended to the input field, usually an icon.
+
+ReactNode
+
+
+
+ | \- | 
+
+""
+
+ |
+| readOnly | 
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| value | 
+
+The value of the input. Can be a string or a number. Use for controlled inputs.
+
+T
+
+
+
+ | \- | 
+
+"Value"
+
+ |
+| width | 
+
+The width of the input.
+
+FormElementWidths
+
+
+
+ | \- | Set object |
+
+### 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.
+
+[](./iframe.html?id=components-input--formatter)
+
+```
+
+<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\=""
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alignRight | 
+Set input content align to right, useful for numeric inputs.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| append | 
+
+Content to append to the input field, usually a button or icon.
+
+ReactNode
+
+
+
+ | \- | 
+
+""
+
+ |
+| clearable | 
+
+If `true`, then user can clear the value of the input. Will be ignored if `rows` prop is in use.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| defaultValue | 
+
+The value of the input. Can be a string or a number. Use for uncontrolled inputs.
+
+T
+
+
+
+ | \- | 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) => string | number
+
+ | \- | \- |
+| inline | 
+
+Make prepend/append element closer to the input content.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| loading | 
+
+The loading states of the input field. If provided a string, will use that text as the loading message.
+
+union
+
+
+
+ | \- | Set object |
+| onChange | 
+
+Emitted when the input value changes with the new changed value.
+
+(e: ChangeEvent<InputBaseElement<TRows>>, value?: T) => void
+
+ | \- | \- |
+| onClear | 
+
+Emitted when the input is manually cleared.
+
+(e: ChangeEvent<InputBaseElement<TRows>>) => void
+
+ | \- | \- |
+| placeholder | 
+
+string
+
+
+
+ | \- | Enter a string and it will show in UPPERCASE when not focused, and show the raw value on focus |
+| prepend | 
+
+Content to prepended to the input field, usually an icon.
+
+ReactNode
+
+
+
+ | \- | 
+
+""
+
+ |
+| value | 
+
+The value of the input. Can be a string or a number. Use for controlled inputs.
+
+T
+
+
+
+ | \- | Set object |
+| width | 
+
+The width of the input.
+
+FormElementWidths
+
+
+
+ | \- | Set object |
+
+### `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`.