diff --git a/.changeset/honest-socks-sin.md b/.changeset/honest-socks-sin.md new file mode 100644 index 00000000000..d630ec8f181 --- /dev/null +++ b/.changeset/honest-socks-sin.md @@ -0,0 +1,5 @@ +--- +"@razorpay/blade": patch +--- + +feat(TextInput): add note on `type="number"` attribute diff --git a/packages/blade/src/components/Input/TextInput/TextInput.stories.tsx b/packages/blade/src/components/Input/TextInput/TextInput.stories.tsx index fee26ca4108..21ad7652dce 100644 --- a/packages/blade/src/components/Input/TextInput/TextInput.stories.tsx +++ b/packages/blade/src/components/Input/TextInput/TextInput.stories.tsx @@ -256,6 +256,23 @@ export const TextInput = TextInputTemplate.bind({}); // Need to do this because of storybook's weird naming convention, More details here: https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#single-story-hoisting TextInput.storyName = 'TextInput'; +export const TextInputTypeNumber = TextInputTemplate.bind({}); +TextInputTypeNumber.storyName = 'TextInput with type number'; +TextInputTypeNumber.args = { + type: 'number', + label: 'Enter Number', + placeholder: 'Enter any random number', +}; + +// @ts-expect-error: Just another undocumented, untyped storybook property ;__; +TextInputTypeNumber.story = { + parameters: { + docs: { + storyDescription: `You might notice that type number allows you to enter other characters as well. That's because instead of setting type number internally, we prefer inputMode numeric. Checkout this article for the reasoning - Why the GOV.UK Design System team changed the input type for numbers \n\nIf you have a usecase of only allowing number in field, you can handle that on validations end.`, + }, + }, +}; + export const TextInputHelpText = TextInputTemplate.bind({}); TextInputHelpText.storyName = 'TextInput with Help Text'; TextInputHelpText.args = { diff --git a/packages/blade/src/components/Input/TextInput/TextInput.tsx b/packages/blade/src/components/Input/TextInput/TextInput.tsx index f372c5408ec..e921daee398 100644 --- a/packages/blade/src/components/Input/TextInput/TextInput.tsx +++ b/packages/blade/src/components/Input/TextInput/TextInput.tsx @@ -69,6 +69,14 @@ type TextInputProps = Pick< /** * Type of Input Field to be rendered. Use `PasswordInput` for type `password` * + * + * **Note on number type** + * + * `type="number"` internally uses `inputMode="numeric"` instead of HTML's `type="number"` which also allows text characters. + * If you have a usecase where you only want to support number input, you can handle it on validations end. + * + * Check out [Why the GOV.UK Design System team changed the input type for numbers](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/) for reasoning + * * @default text */ type?: Type;