@iress-oss/ids-components 6.0.0-alpha.3 → 6.0.0-alpha.30

package/.ai/components/inline.md

@@ -0,0 +1,144 @@
+# Inline
+
+IressInline renders a set of components in a row with equal spacing around them, wrapping onto multiple lines when necessary.
+
+> **Component:** `import { IressInline } from '@iress-oss/ids-components'`
+> **Storybook:** [Inline in Storybook](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-inline--docs)
+
+## Quick Start
+
+```tsx
+import { IressInline } from '@iress-oss/ids-components';
+
+<IressInline gap="spacing.4">
+  uneven
+</IressInline>
+```
+
+import {
+  ComponentExample,
+  ComponentOverview,
+} from '@iress-oss/ids-storybook-config';
+
+## Examples
+
+### Gap
+
+Inline spacing is applied to the direct children of the `IressInline` component.
+
+The amount of spacing is controlled by the `gap` prop and can be set from `spacing.0` to `spacing.10`.
+
+#### What happened to `gutter`?
+
+The previous `gutter` prop has been replaced by `gap`, which uses the latest set of spacing tokens.
+
+The existing `gutter` values are still supported, as they are now aliases for the spacing tokens.
+
+```tsx
+<IressStack gap="spacing.10">
+{SPACING_TOKENS.map((spacing) => (
+<IressText key={spacing}>
+<h2>{spacing}</h2>
+<IressInline gap={spacing as never} />
+</IressText>
+))}
+</IressStack>
+```
+
+[View "Gap" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-inline--gap)
+
+### Responsive gap
+
+The `gap` prop can take an object that takes five key/value pairs that correlate with the IDS breakpoints.
+
+```tsx
+<IressStack gap="spacing.4">
+<IressPanel>
+<p>
+Current breakpoint: <CurrentBreakpoint />.
+</p>
+<p>
+<code>gap=&#123;{JSON.stringify(args.gap)}&#125;</code>
+</p>
+</IressPanel>
+<IressInline />
+</IressStack>
+```
+
+[View "ResponsiveGap" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-inline--responsive-gap)
+
+### Horizontal align
+
+Horizontal alignment of the children is controlled by the `horizontalAlign` prop. It defaults to left and can be set to the following:
+
+- `around` - space is distributed so each direct child has the same space on the left and on the right. This means that the gap between children is twice as large as the gap between the first / last items and the edges of the container, because the gap between children is comprised one child's spacing right plus the next child's spacing left.
+- `between` - space is distributed evenly between direct children, but the first and last children sit tight to the edges of the container.
+- `center` - children are aligned center, similar to `text-align: center`.
+- `evenly` - space is distributed evenly between direct children.
+- `left` - children are aligned left, similar to `text-align: left`.
+- `right` - children are aligned right, similar to `text-align: right`.
+
+```tsx
+<IressContainer>
+<IressStack gap="spacing.10">
+{HORIZONTAL_ALIGNS.map((horizontalAlign) => (
+<IressText key={horizontalAlign}>
+<h2>{horizontalAlign}</h2>
+<IressInline horizontalAlign={horizontalAlign} />
+</IressText>
+))}
+</IressStack>
+</IressContainer>
+```
+
+[View "HorizontalAlign" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-inline--horizontal-align)
+
+### Vertical align
+
+Vertical alignment of the children is controlled by the `verticalAlign` prop. It defaults to top and can be set to the following:
+
+- `bottom` - children are aligned to the bottom of the container.
+- `middle` - children are aligned to the middle of the container.
+- `stretch` - each direct child stretches to the full height of the inline container.
+- `top` - children are aligned to the top of the container.
+
+```tsx
+<IressContainer>
+<IressStack gap="spacing.10">
+{VERTICAL_ALIGNS.map((verticalAlign) => (
+<IressText key={verticalAlign} textAlign="center">
+<h2>{verticalAlign}</h2>
+<IressInline verticalAlign={verticalAlign} />
+</IressText>
+))}
+</IressStack>
+</IressContainer>
+```
+
+[View "VerticalAlign" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-inline--vertical-align)
+
+### No wrap
+
+The `IressInline` component automatically wraps children. There may be some scenarios where you do not require children to be wrapped. For this you can use the `noWrap` prop.
+
+```tsx
+<IressInline gap="spacing.10" noWrap>
+  story
+</IressInline>
+```
+
+[View "NoWrap" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-inline--no-wrap)
+
+## Props
+
+- **Type:** `IressInlineProps`
+- **Type declarations:** `@iress-oss/ids-components/dist/components/Inline/Inline.d.ts`
+
+```typescript
+import type { IressInlineProps } from '@iress-oss/ids-components';
+```
+
+
+---
+
+*View interactive examples: [https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-inline--docs](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-inline--docs)*

package/.ai/components/input-currency-recipes.md

@@ -0,0 +1,32 @@
+# Recipes
+
+InputCurrency component documentation.
+
+> **Component:** `@iress-oss/ids-components`
+> **Storybook:** [Recipes in Storybook](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-input-currency--docs)
+
+## Using IressInputCurrency in table
+
+It is not recommended to use the `readOnly` prop for `IressInputCurrency` inside tables, as it was designed for forms.
+This example shows how to use currency in the table, by using the `format` prop of when defining a column inside `IressTable`.
+Additionally, when all rows have the same currency, it is recommended to add the currency code on the column `label` and remove the `currencyCode` on all rows.
+
+```tsx
+<CurrencyInTableExample />
+```
+
+[View "CurrencyInTable" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-input-currency--currency-in-table)
+
+## OnChange with valid value
+
+Only able to input valid value when use `IressInputCurrency`. In this example, only number and 2 decimal places are allowed.
+
+```tsx
+<ValidValueOnChageExample />
+```
+
+[View "ValidValueOnChage" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-input-currency--valid-value-on-chage)
+
+---
+
+*View interactive examples: [https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-input-currency--docs](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-input-currency--docs)*

package/.ai/components/input-currency.md

@@ -0,0 +1,93 @@
+# InputCurrency
+
+InputCurrency allows a user to input and interact with currency number. It works just like IressInput, with new props locale and currencyCode. This component meets ISO-4217 standard
+
+> **Component:** `import { IressInputCurrency } from '@iress-oss/ids-components'`
+> **Storybook:** [InputCurrency in Storybook](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-input-currency--docs)
+
+## Quick Start
+
+```tsx
+import { IressInputCurrency } from '@iress-oss/ids-components';
+
+<IressInputCurrency defaultValue={12345.678} locale="en-AU" currencyCode="AUD" />
+```
+
+import {
+  ComponentExample,
+  ComponentOverview,
+} from '@iress-oss/ids-storybook-config';
+
+## Examples
+
+### Different Locale and CurrencyCode
+
+Display the GBP with `locale="en-GB"` and `currencyCode="GBP"` props (must pass both together)
+
+```tsx
+<IressInputCurrency locale="en-GB" currencyCode="GBP" placeholder="Enter amount and dispay currency currency separator on blur" />
+```
+
+[View "GBP" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-input-currency--gbp)
+
+Display the JPY with `locale="ja-JPY"` and `currencyCode="JPY"` props (must pass both together)
+
+```tsx
+<IressInputCurrency defaultValue={12345678} locale="ja-JP" currencyCode="JPY" placeholder="Enter amount and dispay currency currency separator on blur" />
+```
+
+[View "JPY" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-input-currency--jpy)
+
+### With Symbol
+
+Display the currency symbol with `withSymbol` props
+
+```tsx
+<IressInputCurrency withSymbol placeholder="Enter amount and dispay currency symbol on blur" />
+```
+
+[View "WithSymbol" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-input-currency--with-symbol)
+
+### More Format Options
+
+Pass more format options with `formatOptions` props. More format options in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat">here</a>
+
+```tsx
+<IressInputCurrency placeholder="Pass and play around with other native Intl.NumberFormat options to the code sandbox" />
+```
+
+[View "FormatOptions" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-input-currency--format-options)
+
+### 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 want to make the number align to right, please pass `alignRight` together.
+
+```tsx
+<IressInputCurrency readOnly alignRight withSymbol />
+```
+
+[View "ReadOnly" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-input-currency--read-only)
+
+### Align Right
+
+Set the input content align to right with `alignRight` prop, which is more friendly for number input.
+
+```tsx
+<IressInputCurrency alignRight />
+```
+
+[View "AlignRight" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-input-currency--align-right)
+
+## Props
+
+- **Type:** `IressInputCurrencyProps`
+- **Type declarations:** `@iress-oss/ids-components/dist/components/InputCurrency/InputCurrency.d.ts`
+
+```typescript
+import type { IressInputCurrencyProps } from '@iress-oss/ids-components';
+```
+
+
+---
+
+*View interactive examples: [https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-input-currency--docs](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-input-currency--docs)*

package/.ai/components/input-recipes.md

@@ -0,0 +1,32 @@
+# Recipes
+
+Input component documentation.
+
+> **Component:** `@iress-oss/ids-components`
+> **Storybook:** [Recipes in Storybook](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-input--docs)
+
+## Percentage formatting
+
+You can use `IressInput` to display percentage formatting. When the field is focused, it can display the raw value, and when blurred, it can display the formatted percentage value.
+
+```tsx
+<InputPercentage />
+```
+
+[View "Percentage" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-input--percentage)
+
+## Using with React Hook Forms
+
+You can use `IressInput` with React Hook Forms quite easily. The recommended way is to use the [`Controller` component from react-hook-forms](https://www.react-hook-form.com/get-started/#IntegratingwithUIlibraries). However, you can use the `register` method directly, with a few customisations to cater for custom `ref` as seen in the code example here.
+
+Where possible, please use `IressFormField` within an [`IressForm` component](/docs/components-form--docs).
+
+```tsx
+<ReactHookFormsInput />
+```
+
+[View "ReactHookForms" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-input--react-hook-forms)
+
+---
+
+*View interactive examples: [https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-input--docs](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-input--docs)*

package/.ai/components/input.md

@@ -0,0 +1,274 @@
+# Input
+
+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.
+
+> **Component:** `import { IressInput } from '@iress-oss/ids-components'`
+> **Storybook:** [Input in Storybook](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-input--docs)
+
+## Quick Start
+
+```tsx
+import { IressInput } from '@iress-oss/ids-components';
+
+<IressInput placeholder="Enter your name" />
+```
+
+import {
+  ComponentExample,
+  ComponentOverview,
+} from '@iress-oss/ids-storybook-config';
+
+## 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).
+
+```tsx
+<IressStack gap="md">
+{/* Copied from: HTMLInputTypeAttribute */}
+{[
+'text',
+'color',
+'date',
+'datetime-local',
+'email',
+'file',
+'month',
+'number',
+'password',
+'search',
+'tel',
+'time',
+'url',
+'week',
+].map((type) => (
+<IressInput placeholder={placeholder ?? `${capitalizeFirstLetter(type)} input`}
+type={type}
+key={type}
+/>
+))}
+</IressStack>
+```
+
+[View "Types" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-input--types)
+
+> [!NOTE]
+> **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).
+
+```tsx
+<IressStack gap="md">
+{inputModes.map((inputMode) => (
+<IressInput placeholder={
+placeholder ??
+`${capitalizeFirstLetter(
+inputMode,
+)} mode, usually best used when type="${inputMode}" `
+}
+inputMode={inputMode}
+key={inputMode}
+/>
+))}
+</IressStack>
+```
+
+[View "InputModes" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-input--input-modes)
+
+### File uploads
+
+When using the `type="file"` attribute, the input allows users to select one or more files from their device. The appearance and behavior are controlled by the browser, and you can use the `onChange` handler to capture the selected files.
+
+```tsx
+const { success } = useToaster();
+    return (
+      <IressField label="File upload">
+        <IressInput
+          {...args}
+          onChange={(e) =>
+            success({
+              content: `File uploaded: ${
+                (e.target as HTMLInputElement).files?.[0].name
+              }`,
+            })
+          }
+        />
+      </IressField>
+    );
+```
+
+[View "FileType" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-input--file-type)
+
+### 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.
+
+```tsx
+<IressInput clearable placeholder="Search" />
+```
+
+[View "Clearable" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-input--clearable)
+
+### 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.
+
+```tsx
+<IressStack gap="md">
+{FORM_ELEMENT_WIDTHS.map((width) => (
+<IressInput placeholder={placeholder ?? width}
+width={width}
+key={width}
+/>
+))}
+</IressStack>
+```
+
+[View "Sizing" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-input--sizing)
+
+### 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.
+
+```tsx
+<IressInput rows={5} />
+```
+
+[View "TextAreas" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-input--text-areas)
+
+### 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
+
+```tsx
+<IressStack gap="md">
+<IressInput prepend={prepend ?? <IressIcon name="search" />}
+placeholder={placeholder ?? 'Prepend slot'}
+/>
+
+<IressInput append={append ?? <IressIcon name="search" />}
+placeholder={placeholder ?? 'Append slot'}
+/>
+
+<IressInput prepend={prepend ?? <IressIcon name="search" />}
+placeholder={placeholder ?? 'Prepend slot'}
+/>
+
+<IressInput append={append ?? <IressIcon name="search" />}
+placeholder={placeholder ?? 'Append slot'}
+/>
+</IressStack>
+```
+
+[View "Slots" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-input--slots)
+
+### Actions
+
+The `actions` prop allows you to add buttons to the input. These buttons will appear next to the input and can be used for actions such as copying the input value to the clipboard or triggering a search.
+
+```tsx
+<IressInput placeholder="Input with action button" />
+```
+
+[View "Actions" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-input--actions)
+
+### 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](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-readonly--docs).
+
+```tsx
+<IressInput readOnly value="Value" />
+```
+
+[View "ReadOnly" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-input--read-only)
+
+### 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.
+
+```tsx
+<IressInput placeholder="Enter a string and it will show in UPPERCASE when not focused, and show the raw value on focus" />
+```
+
+[View "Formatter" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-input--formatter)
+
+#### Currency formatting example
+
+A common use case for the formatter is to display currency values with proper formatting. The following example shows how to format numbers as currency when the input is not focused:
+
+```tsx
+<IressInput defaultValue={0.00} placeholder="Enter any number and it will show in currency format when the input is not focused" type="number" />
+```
+
+[View "CurrencyFormatter" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-input--currency-formatter)
+
+### Auto-growing textareas
+
+For textareas (when `rows` prop is set), you can enable the `autoGrow` prop to automatically expand the textarea height as the user types more lines. This provides a better user experience than forcing users to scroll within a fixed-height textarea.
+
+```tsx
+<IressInput rows={1} autoGrow />
+```
+
+[View "AutoGrow" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-input--auto-grow)
+
+### `variant`
+
+The `variant` prop allows you to apply different styles to the input.
+
+- `search`: Used for search inputs, you can use the `prepend` or `append` slot to add a search icon.
+
+```tsx
+<IressInput variant="search" placeholder="Start your search..." />
+```
+
+[View "Variant" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-input--variant)
+
+## `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`.
+
+## Props
+
+- **Type:** `IressInputProps`
+- **Type declarations:** `@iress-oss/ids-components/dist/components/Input/Input.d.ts`
+
+```typescript
+import type { IressInputProps } from '@iress-oss/ids-components';
+```
+
+
+---
+
+*View interactive examples: [https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-input--docs](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-input--docs)*

package/.ai/components/label.md

@@ -0,0 +1,81 @@
+# Label
+
+Use the IressLabel component when building bespoke form inputs and IressField is too restrictive.
+
+> **Component:** `import { IressLabel } from '@iress-oss/ids-components'`
+> **Storybook:** [Label in Storybook](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-label--docs)
+
+## Quick Start
+
+```tsx
+import { IressLabel } from '@iress-oss/ids-components';
+
+<IressLabel>
+  This is a label
+</IressLabel>
+```
+
+import {
+  ComponentExample,
+  ComponentOverview,
+} from '@iress-oss/ids-storybook-config';
+
+## Examples
+
+### Required
+
+To indicate that an input is required, you may use the `required` prop to distinguish the label with an asterix.
+
+```tsx
+<IressLabel required>
+  This is a label for a required input
+</IressLabel>
+```
+
+[View "Required" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-label--required)
+
+### Hidden label
+
+Sometimes you may wish to have an input with no visible label, but to still wrap the input in a label for accessibility. In this case, set `hiddenLabel` to `true`.
+
+```tsx
+<IressLabel hiddenLabel>
+  This text is visible to screen readers only
+</IressLabel>
+```
+
+[View "HiddenLabel" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-label--hidden-label)
+
+### Rich content
+
+You can render custom content into the label.
+
+```tsx
+<IressLabel hiddenLabel={false} />
+```
+
+[View "RichContent" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-label--rich-content)
+
+## Accessibility
+
+Don't place interactive elements such as anchors or buttons inside the `IressLabel`. Doing so makes it difficult for people to activate the form input associated with the label.
+
+See the [MDN Label Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#accessibility_concerns) for more info.
+
+### Labelling non-interactive content
+
+`IressLabel` can be used to label non-interactive content, such as readonly data. In this case, do not provide a `htmlFor` prop. This will render the label using a `strong` tag instead of a `label` tag.
+
+## Props
+
+- **Type:** `IressLabelProps`
+- **Type declarations:** `@iress-oss/ids-components/dist/components/Label/Label.d.ts`
+
+```typescript
+import type { IressLabelProps } from '@iress-oss/ids-components';
+```
+
+
+---
+
+*View interactive examples: [https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-label--docs](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-label--docs)*