Skip to content
Home

Selection

Info
Demos
Properties

Import

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

Description

Value.Selection is a component for displaying a string value based on a user selection.

There is a corresponding Field.Selection component.

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

Relevant links

Demos

Placeholder

No value selected
Code Editor
<Value.Selection placeholder="No value selected" />

Value

Bar
Code Editor
<Value.Selection value="Bar" />

Label

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

Label and value

Label textFoo
Code Editor
<Value.Selection label="Label text" value="Foo" />

Inline

This is before the component Baz This is after the component

Code Editor
<P>
  This is before the component <Value.Selection value="Baz" inline /> This
  is after the component
</P>

Field.Selection with path

When using the same path as on a Field.Selection, the title will be used as the displayed value.

My selection
My selectionBar
Code Editor
<Form.Handler
  data={{
    selection: 'bar',
    myList: [
      {
        value: 'foo',
        title: 'Foo',
      },
      {
        value: 'bar',
        title: 'Bar',
      },
      {
        value: 'baz',
        title: 'Baz',
      },
    ],
  }}
>
  <Flex.Stack>
    <Field.Selection
      path="/selection"
      dataPath="/myList"
      variant="radio"
      label="My selection"
    />
    <Value.Selection path="/selection" dataPath="/myList" inheritLabel />
  </Flex.Stack>
</Form.Handler>

Field.Option and Field.Selection

When using the same path as on a Field.Selection, the Field.Option title will be used as the displayed value.

My selection
Code Editor
<Form.Handler>
  <Flex.Stack>
    <Field.Selection
      label="My selection"
      path="/myPath"
      variant="radio"
      value="bar"
    >
      <Field.Option value="foo" title="Foo" />
      <Field.Option value="bar" title="Bar" />
      <Field.Option value="baz" title="Baz" />
    </Field.Selection>

    <Value.Selection label="My selection" path="/myPath" />
  </Flex.Stack>
</Form.Handler>