Select Field

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

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.

Config options

Option	Type	Default	Description
`name`	`string`	Required	Property name used in stored records and APIs. See 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.
`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.
`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.
`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 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. 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.
`access`	`{ create, read, update }`	Allowed	`FieldAccess` functions for each operation. See field access control.
`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.
`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.
`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.
`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.

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.

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',
        ),
}

Option colors

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

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:

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, 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, 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

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

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

'use client'

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

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

Label

Server component

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

'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} />
)

Start here

Basics

Managing Data

Features

Ecosystem

Deployment

Config options

Option colors

Admin options

Example

Custom components

Field

Server component

Client component

Label

Server component

Client component

​Config options

​Filter options

​Option colors

​Admin options

​Example

​Custom components

​Field

​Server component

​Client component

​Label

​Server component

​Client component

Config options

Filter options

Option colors

Admin options

Example

Custom components

Field

Server component

Client component

Label

Server component

Client component