---
title: Field.Option
description: >-
version: 11.17.0
generatedAt: 2026-11-05T09:55:46.901Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

# Field.Option

## Import

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

## Description

`Field.Option` is a pseudo-component that is used by parent components to configure options. It has no use on its own. How it renders, and what extra props it accepts, are defined by the parent.

### Used in:

- [Field.ArraySelection](/web/forms/base-fields/ArraySelection/)
- [Field.Selection](/web/forms/base-fields/Selection/)

## Relevant links

- [Source code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/src/extensions/forms/Field/Option)
- [Docs code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-design-system-portal/src/docs/web/forms/base-fields/Option)

```tsx
import { Field } from '@dnb/eufemia/extensions/forms'
render(
  <Field.Selection>
    <Field.Option value="foo" title="Foo!" />
    <Field.Option value="bar" title="Baar!" />
  </Field.Selection>
)
```

<!-- eufemia-properties-usage:start -->
Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. [Read about intended use and customization](/web/styling-and-themes/configuration/component-properties/#intended-use-and-customization).
<!-- eufemia-properties-usage:end -->

## Properties

There might be more props available depending on the parent component. For example, `<Field.Selection variant="button">` also allows the `icon` property, among others, for its options.


```json
{
  "props": {
    "value": {
      "doc": "Value for this option.",
      "type": [
        "string",
        "number"
      ],
      "status": "optional"
    },
    "title": {
      "doc": "Title for the option. Overrides `children`.",
      "type": [
        "string",
        "React.ReactNode"
      ],
      "status": "optional"
    },
    "groupIndex": {
      "doc": "What group index in the `groups` property ([Field.Selection](/web/forms/base-fields/Selection/)) this item belongs to.",
      "type": "number",
      "status": "optional"
    },
    "text": {
      "doc": "Secondary text.",
      "type": [
        "string",
        "React.ReactNode"
      ],
      "status": "optional"
    },
    "disabled": {
      "doc": "Will disable the option.",
      "type": "boolean",
      "status": "optional"
    },
    "help": {
      "doc": "Provide help content for the field using `title` and `content` as a string or `React.ReactNode`. Additionally, you can set `open` to `true` to display the inline help, set `openOnFind` to `true` to open matching inline help from browser find-in-page, set the `breakout` property to `false` to disable the breakout of the inline help content, set `outset` to `false` to display the help text inline (inset) instead of the default outset behavior, or use `renderAs` set to `dialog` to render the content in a [Dialog](/web/components/dialog/) (recommended for larger amounts of content).",
      "type": "object",
      "status": "optional"
    },
    "children": {
      "doc": "Optional way to provide `title`. Will be ignored if `title` is used.",
      "type": "React.ReactNode",
      "status": "optional"
    }
  },
  "usageGuidance": "Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. [Read about intended use and customization](/web/styling-and-themes/configuration/component-properties/#intended-use-and-customization)."
}
```