# Create Select in a customField

**URL:** <https://community.developer.atlassian.com/t/create-select-in-a-customfield/71090>\
**Category:** Forge UI Kit and Custom UI\
**Tags:** forge-ui, forge-ui-kit-2, forge-custom-field, jira-cloud\
**Created:** [July 10, 2023, 2:38pm UTC](https://community.developer.atlassian.com/t/create-select-in-a-customfield/71090 "2023-07-10T14:38:39Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Qeychon](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/qeychon/32/48157_2.png) [@Qeychon](https://community.developer.atlassian.com/u/Qeychon)\
**Post date:** [July 10, 2023, 2:38pm UTC](https://community.developer.atlassian.com/t/create-select-in-a-customfield/71090/1 "2023-07-10T14:38:39Z")

</div>

I just want create in a customfield with a select form.  
For my understanding we have to use now the UIKi2 because if I use the example code in the example [https://developer.atlassian.com/platform/forge/ui-kit-components/form/](https://developer.atlassian.com/platform/forge/ui-kit-components/form/) with uikit “import ForgeUI, { Form } from “@forge/ui”;” Than the npm will throw an exception:

```auto

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
        - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "buffer": false }

```

Than I found out, I have to use UIKit2:

```auto
import { Form } from "@forge/react";

```

After Deployment the Package, the form is complete defect and just show the default form select element. Because of the next exception

```auto
"Warning: <Select /> is using incorrect casing.".

```

so it seems the import doesnt work too.  
It seems also they dont use the UIKit just import like from ‘@atlaskit’; But atlaskit does not have select. So how I can implement just a select Option in a custom field?

---

<div class="post-metadata">

**Author:** ![Qeychon](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/qeychon/32/48157_2.png) [@Qeychon](https://community.developer.atlassian.com/u/Qeychon)\
**Post date:** [July 11, 2023, 11:32am UTC](https://community.developer.atlassian.com/t/create-select-in-a-customfield/71090/2 "2023-07-11T11:32:50Z")

</div>

Ok there are many misunderstanding here, at first

- UIKit2 are not supported for the customField yet
- The UIKit is not running on client side, in Forge the pages is generated server side.  
So If I want to use the UIKit than I have to use the Function to generated the View. For Example:

```auto
modules:
  jira:customField:
    - key: test-jira-plugin-hello-world
      name: Test
      description: A hello world custom field.
      type: string
      edit:
        function: edit
      function: main
  function:
    - key: main
      handler: index.runView
    - key: edit
      handler: index.runEdit

```

The function main shows the custom view and the edit call the edit View.

edit.jsx

```auto
export const Edit = () => {

    const onSubmit = (formValue) => {
        const copy = JSON.parse(JSON.stringify(formValue));
        console.log("debug");
        return 34;
    };

    return (
        <CustomFieldEdit onSubmit={onSubmit}>
            <Select
                isRequired={true}
                label="Choose summary currency"
                name="currencySummary"
            >
                <Option
                    label="test"
                    value="tester"
                />
            </Select>
        </CustomFieldEdit>
    );
}

```

View.jsx

```auto
export const View = () => {

    return (
        <CustomField>
            <Fragment>
                <Text>Hallo Welt</Text>
            </Fragment>
        </CustomField>
    )
}

```

index.jsx

```auto
export const runEdit = render(<Edit/>);
export const runView = render(<View/>);

```

than it works.