Select Enum Field
uifoundry/select-enum-fieldFreeComponent
PayloadCMS select field that generates options from TypeScript enums
Live preview
live · rendered by the registry
Rendered by uifoundry on their own page — this is the component running, not a screenshot of it.Install it
npx shadcn@latest add https://uifoundry.dev/r/select-enum-field.jsonSource
1import type { Option, OptionObject } from "payload";2import type { SelectField } from "@/registry/default/lib/fields";3import type { PickRequired } from "~/types";45type RequiredFields = PickRequired<SelectField, "name">;6interface SelectEnumFieldProps extends RequiredFields {7 useKeyAsValue?: boolean;8}910export default function selectEnumField<T extends Record<string, unknown>>(11 object: T,12 { useKeyAsValue = false, ...restConfig }: SelectEnumFieldProps,13): SelectField {14 // @ts-expect-error mismatched hasMany type for some reason, unsure why. select field specific error here15 return {16 type: "select",17 options: Object.entries(object).map(18 ([key, value]) =>19 ({ value: useKeyAsValue ? key : value, label: key }) as OptionObject,20 ) as Option[],21 hasMany: false,22 ...restConfig,23 };24}
What it pulls in
npm packages
Other registry items
Files it writes
More from uifoundry
All 54 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Animated Groupanimated-group | uifoundry | Components | Free | 2 deps | |
| Buttonbutton | uifoundry | Components | Free | 3 deps | |
| Call To Action Pair Fieldcall-to-action-pair-field | uifoundry | Components | Free | 3 deps | |
| Cardcard | uifoundry | Components | Free | 1 dep | |
| Description Fielddescription-field | uifoundry | Components | Free | 2 deps | |
| Flickering Gridflickering-grid | uifoundry | Components | Free | 1 dep | |
| Header Fieldheader-field | uifoundry | Components | Free | 2 deps | |
| Icon Componenticon | uifoundry | Components | Free | 2 deps |
