diff --git a/.changeset/good-doors-cheat.md b/.changeset/good-doors-cheat.md
new file mode 100644
index 0000000000..99972d31c1
--- /dev/null
+++ b/.changeset/good-doors-cheat.md
@@ -0,0 +1,6 @@
+---
+'@commercetools-uikit/text-field': patch
+'@commercetools-uikit/text-input': patch
+---
+
+Forward `maxLength` prop to `TextField` and `TextInput` input element
diff --git a/packages/components/fields/text-field/README.md b/packages/components/fields/text-field/README.md
index f104138e90..7ccef460cb 100644
--- a/packages/components/fields/text-field/README.md
+++ b/packages/components/fields/text-field/README.md
@@ -62,6 +62,7 @@ export default Example;
| `isDisabled` | `boolean` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). |
| `isReadOnly` | `boolean` | | | Indicates that the field is displaying read-only content |
| `placeholder` | `string` | | | Placeholder text for the input |
+| `maxLength` | `number` | | | Maximum number of characters allowed in the input field |
| `title` | `union`
Possible values:
`string , ReactNode` | ✅ | | Title of the label |
| `hint` | `union`
Possible values:
`string , ReactNode` | | | Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas description can describe it in more depth. Can also receive a hintIcon. |
| `description` | `union`
Possible values:
`string , ReactNode` | | | Provides a description for the title. |
diff --git a/packages/components/fields/text-field/src/text-field.story.js b/packages/components/fields/text-field/src/text-field.story.js
index 183c080265..46a5d24b3a 100644
--- a/packages/components/fields/text-field/src/text-field.story.js
+++ b/packages/components/fields/text-field/src/text-field.story.js
@@ -8,6 +8,7 @@ import {
text,
select,
object,
+ number,
} from '@storybook/addon-knobs/react';
import Constraints from '@commercetools-uikit/constraints';
import Section from '../../../../../docs/.storybook/decorators/section';
@@ -78,6 +79,7 @@ storiesOf('Components|Fields', module)
isDisabled={boolean('isDisabled', false)}
isReadOnly={boolean('isReadOnly', false)}
placeholder={text('placeholder', 'Placeholder')}
+ maxLength={number('maxLength', undefined)}
title={text('title', 'Username')}
hint={hint}
description={text('description', '')}
diff --git a/packages/components/fields/text-field/src/text-field.tsx b/packages/components/fields/text-field/src/text-field.tsx
index 4f8b538303..ddab5bc1bd 100644
--- a/packages/components/fields/text-field/src/text-field.tsx
+++ b/packages/components/fields/text-field/src/text-field.tsx
@@ -166,6 +166,10 @@ export type TTextFieldProps = {
* Badge to be displayed beside the label. Might be used to display additional information about the content of the field (E.g verified email)
*/
badge?: ReactNode;
+ /**
+ * Maximum number of characters allowed in the input. if this prop is used, It is recommended to inform the user about this limit in the InputField description, or otherwise
+ */
+ maxLength?: number;
};
type TTextFieldState = Pick;
@@ -247,6 +251,7 @@ class TextField extends Component {
hasWarning={hasWarning}
hasError={hasError}
placeholder={this.props.placeholder}
+ maxLength={this.props.maxLength}
horizontalConstraint="scale"
{...filterDataAttributes(this.props)}
/* ARIA */
diff --git a/packages/components/inputs/text-input/README.md b/packages/components/inputs/text-input/README.md
index f697ec7147..166cc68347 100644
--- a/packages/components/inputs/text-input/README.md
+++ b/packages/components/inputs/text-input/README.md
@@ -60,6 +60,7 @@ export default Example;
| `hasError` | `boolean` | | | Indicates if the input has invalid values |
| `hasWarning` | `boolean` | | | |
| `placeholder` | `string` | | | Placeholder text for the input |
+| `maxLength` | `number` | | | Maximum number of characters allowed in the input field |
| `horizontalConstraint` | `union`
Possible values:
`, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the input fields. |
## `data-*` props
diff --git a/packages/components/inputs/text-input/src/text-input.story.js b/packages/components/inputs/text-input/src/text-input.story.js
index 296dd9fd64..1ead2c286a 100644
--- a/packages/components/inputs/text-input/src/text-input.story.js
+++ b/packages/components/inputs/text-input/src/text-input.story.js
@@ -1,7 +1,13 @@
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { Value } from 'react-value';
-import { withKnobs, boolean, text, select } from '@storybook/addon-knobs/react';
+import {
+ withKnobs,
+ boolean,
+ text,
+ select,
+ number,
+} from '@storybook/addon-knobs/react';
import Constraints from '@commercetools-uikit/constraints';
import Section from '../../../../../docs/.storybook/decorators/section';
import Readme from '../README.md';
@@ -45,6 +51,7 @@ storiesOf('Components|Inputs', module)
hasError={boolean('hasError', false)}
hasWarning={boolean('hasWarning', false)}
placeholder={text('placeholder', 'Placeholder')}
+ maxLength={number('maxLength', undefined)}
horizontalConstraint={select(
'horizontalConstraint',
Constraints.getAcceptedMaxPropValues(3),
diff --git a/packages/components/inputs/text-input/src/text-input.tsx b/packages/components/inputs/text-input/src/text-input.tsx
index 55a59472e5..b8b2dd3c67 100644
--- a/packages/components/inputs/text-input/src/text-input.tsx
+++ b/packages/components/inputs/text-input/src/text-input.tsx
@@ -89,6 +89,10 @@ export type TTextInputProps = {
| 16
| 'scale'
| 'auto';
+ /**
+ * Maximum number of characters allowed in the input. If this prop is used, it is recommended to inform the user about this limit in the InputField description, or otherwise.
+ */
+ maxLength?: number;
};
const defaultProps: Pick = {
@@ -114,6 +118,7 @@ const TextInput = (props: TTextInputProps) => {
onFocus={props.onFocus}
disabled={props.isDisabled}
placeholder={props.placeholder}
+ maxLength={props.maxLength}
readOnly={props.isReadOnly}
autoFocus={props.isAutofocussed}
autoComplete={props.autoComplete}