diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/Examples.tsx
index 0cc9f66f2ac..e8d664d1539 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/Examples.tsx
@@ -54,6 +54,21 @@ export const LabelAndValue = () => {
)
}
+export const WithHelp = () => {
+ return (
+
+ console.log('onChange', value)}
+ help={{
+ title: 'Help is available',
+ contents:
+ 'Helping others, encouraging others, are often acts of being kind that have more meaning that you may realize.',
+ }}
+ />
+
+ )
+}
+
export const Disabled = () => {
return (
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/demos.mdx
index 02c709df956..63d00cefcc1 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/demos.mdx
@@ -22,6 +22,10 @@ import * as Examples from './Examples'
+### With help
+
+
+
### Disabled
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 e4b0caed344..19d5f418980 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,10 +10,12 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties.
### Component-specific props
-| Property | Type | Description |
-| ------------------------------------------- | ------------------- | --------------------------------------------------------------------------------------- |
-| `countryCodeFieldClassName` | `string` | _(optional)_ Class name for the country code component. |
-| `numberFieldClassName` | `string` | _(optional)_ Class name for the number component. |
-| `width` | `string` or `false` | _(optional)_ `large` for predefined standard width, `stretch` for fill available width. |
-| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents` |
-| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. |
+| Property | Type | Description |
+| ------------------------------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------- |
+| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents` |
+| `countryCodeFieldClassName` | `string` | _(optional)_ Class name for the country code component. |
+| `numberFieldClassName` | `string` | _(optional)_ Class name for the number component. |
+| `countryCodeLabel` | `string` | _(optional)_ Label to show above / before the country code field |
+| `numberMask` | Various | _(optional)_ See property `mask` of the [InputMasked](/uilib/components/input-masked/properties) component. |
+| `width` | `string` or `false` | _(optional)_ `large` for predefined standard width, `stretch` for fill available width. |
+| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. |
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber.tsx
index 76fe7bb505c..1b724d560db 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber.tsx
@@ -5,18 +5,19 @@ import classnames from 'classnames'
import CountryCode from './CountryCode'
import StringComponent from './String'
import { useDataValue } from '../hooks'
-import { FieldProps, pickSpacingProps } from '../types'
+import { FieldHelpProps, FieldProps, pickSpacingProps } from '../types'
import SharedContext from '../../../shared/Context'
-export type Props = FieldProps & {
- countryCodeFieldClassName?: string
- numberFieldClassName?: string
- countryCodeLabel?: string
- numberMask?: InputMaskedProps['mask']
- width?: 'large' | 'stretch'
- onCountryCodeChange?: (value: string | undefined) => void
- onNumberChange?: (value: string | undefined) => void
-}
+export type Props = FieldHelpProps &
+ FieldProps & {
+ countryCodeFieldClassName?: string
+ numberFieldClassName?: string
+ countryCodeLabel?: string
+ numberMask?: InputMaskedProps['mask']
+ width?: 'large' | 'stretch'
+ onCountryCodeChange?: (value: string | undefined) => void
+ onNumberChange?: (value: string | undefined) => void
+ }
function PhoneNumber(props: Props) {
const sharedContext = useContext(SharedContext)
@@ -46,6 +47,7 @@ function PhoneNumber(props: Props) {
error,
disabled,
width = 'large',
+ help,
handleFocus,
handleBlur,
handleChange,
@@ -141,6 +143,7 @@ function PhoneNumber(props: Props) {
error={error}
disabled={disabled}
width="stretch"
+ help={help}
/>
)