> ## Documentation Index
> Fetch the complete documentation index at: https://docs.frogbot.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Select Field

> Choose one or many values from a predefined list.

The Select field stores one predefined option, or an ordered array of options when `hasMany` is enabled.

```ts theme={"theme":"tokyo-night"}
import type { Field } from 'frogbot'

export const Status: Field = {
  name: 'status',
  type: 'select',
  options: [
    { label: 'Draft', value: 'draft' },
    { label: 'Published', value: 'published' },
  ],
}
```

Options may be strings or `{ label, value }` objects, and objects may add a [color](#option-colors).

## Config options

| Option | Type | Default | Description |
| - | - | - | - |
| `name` | `string` | Required | Property name used in stored records and APIs. See [field names](https://docs.frogbot.ai/fields/overview.md#field-names). |
| `type` | `'select'` | Required | Selects the Select field. |
| `options` | `(string \| { label: string \| Record<string, string>; value: string; color?: OptionColor })[]` | Required | Allowed values. A string is used as both label and value. `color` shows the option as a coloured pill. See [Option colors](#option-colors). |
| `hasMany` | `boolean` | `false` | Stores an ordered array of selections instead of one value. |
| `filterOptions` | `({ data, options, req, siblingData }) => Option[]` | — | Returns the options shown and accepted for the current record. See [Filter options](#filter-options). |
| `enumName` | `string \| ({ tableName }) => string` | Generated from the field name | SQL enum name. |
| `dbName` | `string \| ({ tableName }) => string` | Generated from the field name | SQL table name for the values of a `hasMany` field. |
| `interfaceName` | `string` | — | Generates a reusable top-level TypeScript type for the options. |
| `label` | `string \| Record<string, string> \| (({ i18n, t }) => string) \| false` | Generated from `name` | Label shown in the admin panel. Use an object keyed by language code for translations, or `false` to hide the label. |
| `required` | `boolean` | `false` | Rejects an empty value in the default validation. |
| `unique` | `boolean` | `false` | Creates a unique database index for the field path. See [indexes](https://docs.frogbot.ai/database/indexes.md). |
| `index` | `boolean` | `false` | Creates a database index for faster queries. `unique` already creates one. |
| `localized` | `boolean` | `false` | Stores one value per configured locale. Ignored without [localization](https://docs.frogbot.ai/configuration/localization.md) or inside a localized parent. |
| `defaultValue` | `string \| string[]` or `({ locale, req, user }) => value` | — | Value used when the field is missing. It must be one of the configured options. |
| `validate` | `Validate` | Built-in validator | Replaces the built-in validator. See [validation](https://docs.frogbot.ai/fields/overview.md#validation). The built-in validator rejects values outside `options` or `filterOptions`, and duplicate selections when `hasMany` is `true`. |
| `hooks` | `{ beforeValidate, beforeChange, afterChange, afterRead, beforeDuplicate }` | — | Arrays of `FieldHook` functions for each phase. See [field hooks](https://docs.frogbot.ai/hooks/fields.md). |
| `access` | `{ create, read, update }` | Allowed | `FieldAccess` functions for each operation. See [field access control](https://docs.frogbot.ai/access-control/fields.md). |
| `hidden` | `boolean` | `false` | Removes the field from API responses and the admin panel while keeping stored data. |
| `saveToJWT` | `boolean \| string` | `false` | In an auth-enabled collection, copies the value into the user's token. A string sets the token key. See [token data](https://docs.frogbot.ai/authentication/token-data.md). |
| `virtual` | `boolean \| string` | `false` | `true` skips database storage; a string reads a value through a relationship path. Virtual fields are read-only in the admin panel unless `admin.readOnly` is `false`. See [virtual fields](https://docs.frogbot.ai/fields/overview.md#virtual-field-configuration). |
| `disableDuplicate` | `boolean` | `false` | Leaves the value out when a document is duplicated, so the copy uses `defaultValue`. |
| `admin` | `object` | — | Admin-panel options. See [Admin options](#admin-options). |
| `custom` | `Record<string, any>` | — | Server-only metadata for your own code and plugins. Use `admin.custom` for data the browser also needs. |
| `jsonSchema` | `Array<({ jsonSchema }) => JSONSchema4>` | — | Functions that modify the JSON Schema used by [type generation](https://docs.frogbot.ai/typescript/generating-types.md). |

Option values should avoid hyphens and special characters when the field's
metadata will be used to build a GraphQL schema. Underscores are safe. FrogBot
does not currently ship a GraphQL execution route; this constraint applies
only when an application separately mounts a compatible executor.

### Filter options

`filterOptions` controls both which options appear in the admin panel and which values can be saved. It receives `data`, `options`, `siblingData`, and `req`, the current `FrogBotRequest` with `req.frogbot`, and must return the options synchronously.

Common uses include restricting options by user role and changing available options based on another field.

```ts theme={"theme":"tokyo-night"}
import type { Field } from 'frogbot'

export const Visibility: Field = {
  name: 'visibility',
  type: 'select',
  options: ['public', 'members', 'internal'],
  filterOptions: ({ data, options }) =>
    data.allowInternal
      ? options
      : options.filter((option) =>
          (typeof option === 'string' ? option : option.value) !== 'internal',
        ),
}
```

Unlike relationship and upload `filterOptions`, this function returns an array
of options rather than a query constraint.

## Option colors

Give an option a `color` to show its value as a coloured pill in the admin panel.

```ts theme={"theme":"tokyo-night"}
import type { Field } from 'frogbot'

export const Status: Field = {
  name: 'status',
  type: 'select',
  options: [
    { label: 'Backlog', value: 'backlog' },
    { label: 'In progress', value: 'in_progress', color: 'blue' },
    { label: 'Done', value: 'done', color: 'green' },
  ],
}
```

`color` is one of seven names, the hues of the admin panel's colour system: `gray`, `blue`, `green`, `yellow`, `red`, `pink` and `purple`. Each one follows the admin's light or dark theme. The `OptionColor` type holds the same names:

```ts theme={"theme":"tokyo-night"}
import type { OptionColor } from 'frogbot'
```

Once any option has a colour, every value of the field shows as a pill. An option without a colour, and a stored value that matches no option, show as `gray`. A `hasMany` field shows one pill per value, in stored order. A field where no option has a colour looks the same as before.

Pills appear in:

* List cells.
* Board and Calendar cards.
* [Board column headers](https://docs.frogbot.ai/admin/collection-board.md#column-headers), when the field groups the board.

The edit form and the List filters keep their usual controls.

Colours are for display only. They don't change stored values, validation, API responses or generated types. A custom `admin.components.Cell` replaces the pills in the List; Board and Calendar cards still show them.

A name outside the list fails the type check, and FrogBot stops at startup with an error that names the field, the option and the allowed colours. `cyan`, `teal` and `orange` are no longer accepted; use `blue`, `green` or `yellow`.

## Admin options

Select fields support the standard [field admin options](https://docs.frogbot.ai/fields/overview.md#admin-options), plus these options:

| Option | Type | Default | Description |
| - | - | - | - |
| `isClearable` | `boolean` | `true` | Shows a control that clears the selection. |
| `isSortable` | `boolean` | `true` | Lets editors reorder selections when `hasMany` is `true`. |
| `placeholder` | `string \| (({ i18n, t }) => string)` | — | Placeholder text shown when nothing is selected. |

## Example

```ts theme={"theme":"tokyo-night"}
import type { CollectionConfig } from 'frogbot'

export const Cars: CollectionConfig = {
  slug: 'cars',
  fields: [
    {
      name: 'selectedFeatures',
      type: 'select',
      hasMany: true,
      admin: {
        isClearable: true,
        isSortable: true,
      },
      options: [
        { label: 'Metallic paint', value: 'metallic_paint' },
        { label: 'Alloy wheels', value: 'alloy_wheels' },
        { label: 'Carbon fiber dashboard', value: 'carbon_fiber_dashboard' },
      ],
    },
  ],
}
```

## Custom components

### Field

#### Server component

```tsx theme={"theme":"tokyo-night"}
import { SelectField } from '@frogbotai/ui/admin'
import type { SelectFieldServerProps } from 'frogbot'

export const CustomSelectServer = (props: SelectFieldServerProps) => (
  <SelectField
    field={props.clientField}
    path={props.path}
    permissions={props.permissions}
    schemaPath={props.schemaPath}
  />
)
```

#### Client component

```tsx theme={"theme":"tokyo-night"}
'use client'

import { SelectField } from '@frogbotai/ui/admin'
import type { SelectFieldClientProps } from 'frogbot'

export const CustomSelectClient = (props: SelectFieldClientProps) => <SelectField {...props} />
```

### Label

#### Server component

```tsx theme={"theme":"tokyo-night"}
import { FieldLabel } from '@frogbotai/ui/admin'
import type { SelectFieldLabelServerProps } from 'frogbot'

export const CustomSelectLabelServer = ({ clientField, path }: SelectFieldLabelServerProps) => (
  <FieldLabel
    label={clientField.label || clientField.name}
    path={path}
    required={clientField.required}
  />
)
```

#### Client component

```tsx theme={"theme":"tokyo-night"}
'use client'

import { FieldLabel } from '@frogbotai/ui/admin'
import type { SelectFieldLabelClientProps } from 'frogbot'

export const CustomSelectLabelClient = ({ field, path }: SelectFieldLabelClientProps) => (
  <FieldLabel label={field.label || field.name} path={path} required={field.required} />
)
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.