#Selection

#Import

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

#Description

Field.Selection is a component for selecting between options using a dropdown or similar user experiences.

Uses the Field.Option pseudo-component to define options.

There is a corresponding Value.Selection component.

import { Field } from '@dnb/eufemia/extensions/forms'

render(
  <Field.Selection placeholder="Select something...">
    <Field.Option value="foo" title="Foo!" />
    <Field.Option value="bar" title="Baar!" />
  </Field.Selection>,
)

You can also use the dataPath property to provide the data to the component:

import { Field } from '@dnb/eufemia/extensions/forms'

render(
  <Form.Handler
    data={{
      myDataPath: [
        { title: 'Foo!', value: 'foo' },
        { title: 'Bar!', value: 'bar' },
      ],
    }}
  >
    <Field.Selection dataPath="/myDataPath" />
  </Form.Handler>,
)

#Relevant links

• Source code
• Docs code

#About the Autocomplete variant

The autocomplete variant (variant="autocomplete") is a special easy drop-in version – basically as an replacement for the Dropdown variant, but with a search capability.

The Autocomplete by itself can be customized and used in various ways. If you need more control, you can use the autocompleteProps property to forward any additional properties (camelCase) to the Autocomplete component.