diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/properties.mdx
index 668babb6076..107617e7344 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/properties.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/properties.mdx
@@ -10,6 +10,7 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties.
| Property | Type | Description |
| --------------------------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------- |
+| `pattern` | `boolean` | _(optional)_ Validation based on regex pattern for the number field e.g. `pattern="^[49]+"`. |
| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents`. |
| `countries` | `string` | _(optional)_ List only a certain set of countries: `Scandinavia`, `NorthernNordic` or `Europe` |
| `omitCountryCodeField` | `boolean` | _(optional)_ If `true` is given, then everything related to country code is removed. |
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx
index d48a8bd197b..463b68ecb31 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx
@@ -3,7 +3,7 @@ import { Autocomplete, Flex } from '../../../../components'
import { InputMaskedProps } from '../../../../components/InputMasked'
import classnames from 'classnames'
import countries, { CountryType } from '../../constants/countries'
-import StringComponent from '../String'
+import StringComponent, { Props as InputProps } from '../String'
import { useDataValue } from '../../hooks'
import FieldBlock from '../../FieldBlock'
import { FieldHelpProps, FieldProps } from '../../types'
@@ -17,6 +17,7 @@ export type Props = FieldHelpProps &
countryCodePlaceholder?: string
countryCodeLabel?: string
numberMask?: InputMaskedProps['mask']
+ pattern?: InputProps['pattern']
width?: 'large' | 'stretch'
omitCountryCodeField?: boolean
onCountryCodeChange?: (value: string | undefined) => void
@@ -63,6 +64,7 @@ function PhoneNumber(props: Props) {
const errorMessages = useMemo(
() => ({
required: tr.phoneNumberErrorRequired,
+ pattern: tr.phoneNumberErrorRequired,
...props?.errorMessages,
}),
[tr, props.errorMessages]
@@ -93,6 +95,7 @@ function PhoneNumber(props: Props) {
disabled,
width = 'large',
help,
+ pattern,
required,
validateInitially,
continuousValidation,
@@ -290,6 +293,8 @@ function PhoneNumber(props: Props) {
width={omitCountryCodeField ? 'medium' : 'stretch'}
help={help}
required={required}
+ pattern={pattern}
+ errorMessages={errorMessages}
validateInitially={validateInitially}
continuousValidation={continuousValidation}
validateUnchanged={validateUnchanged}
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/__tests__/PhoneNumber.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/__tests__/PhoneNumber.test.tsx
index f8c8561b78f..7f9ee428e56 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/__tests__/PhoneNumber.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/__tests__/PhoneNumber.test.tsx
@@ -456,6 +456,47 @@ describe('Field.PhoneNumber', () => {
).not.toBeInTheDocument()
})
+ it('should handle "pattern" property', async () => {
+ render(
+
+
+
+ )
+
+ const numberElement: HTMLInputElement = document.querySelector(
+ '.dnb-forms-field-phone-number__number input'
+ )
+
+ await userEvent.type(numberElement, '34')
+ fireEvent.blur(numberElement)
+
+ expect(document.querySelector('[role="alert"]')).toBeInTheDocument()
+ expect(document.querySelector('[role="alert"]').textContent).toContain(
+ 'valid number'
+ )
+
+ await userEvent.type(numberElement, '{Backspace>8}89')
+ fireEvent.blur(numberElement)
+
+ expect(document.querySelector('[role="alert"]')).toBeInTheDocument()
+
+ await userEvent.type(numberElement, '{Backspace>8}43')
+ fireEvent.blur(numberElement)
+
+ expect(numberElement.value).toBe('43 ')
+
+ expect(
+ document.querySelector('[role="alert"]')
+ ).not.toBeInTheDocument()
+
+ await userEvent.type(numberElement, '{Backspace>8}98')
+ fireEvent.blur(numberElement)
+
+ expect(
+ document.querySelector('[role="alert"]')
+ ).not.toBeInTheDocument()
+ })
+
it('should filter countries list with given filterCountries', () => {
render(