Skip to content
Home

PhoneNumber

Info
Demos
Properties

Import

import { Value } from '@dnb/eufemia/extensions/forms'
render(<Value.PhoneNumber />)

Description

Value.PhoneNumber is a wrapper component for displaying string values, with user experience tailored for phone number values.

There is a corresponding Field.PhoneNumber component.

import { Value } from '@dnb/eufemia/extensions/forms'
render(<Value.PhoneNumber />)

Relevant links

Demos

Empty

Mobilnummer
Code Editor
<Value.PhoneNumber showEmpty />

Placeholder

MobilnummerThe value was not filled in
Code Editor
<Value.PhoneNumber placeholder="The value was not filled in" />

Value

Mobilnummer98 71 23 45
Code Editor
<Value.PhoneNumber value="98712345" />

Label

Label text
Code Editor
<Value.PhoneNumber label="Label text" showEmpty />

Label and value

Label text98 71 23 45
Code Editor
<Value.PhoneNumber label="Label text" value="98712345" />

Inline

This is before the component 98 71 23 45 This is after the component

Code Editor
<P>
  This is before the component{' '}
  <Value.PhoneNumber value="98712345" inline /> This is after the component
</P>

International Suffix

Label text+47 98 71 23 45Label text+886 09 98 47 27 51Label text+1 (868) 67 58 28 8
Code Editor
<Flex.Stack>
  <Value.PhoneNumber label="Label text" value="+47 98712345" />
  <Value.PhoneNumber label="Label text" value="+886 0998472751" />
  <Value.PhoneNumber label="Label text" value="+1-868 6758288" />
</Flex.Stack>