import type { Field } from 'frogbot'
export const Theme: Field = {
name: 'theme',
type: 'radio',
defaultValue: 'light',
options: [
{ label: 'Light', value: 'light' },
{ label: 'Dark', value: 'dark' },
],
}
{ label, value } objects.
Config options
| Option | Type | Default | Description |
|---|---|---|---|
name | string | Required | Property name used in stored records and APIs. See field names. |
type | 'radio' | Required | Selects the Radio 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. |
enumName | string | ({ tableName }) => string | Generated from the field name | SQL enum name. |
dbName | string | ({ tableName }) => string | — | SQL table name. SQL adapters use it only for hasMany select fields, so it has no effect on Radio fields. |
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 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. |
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. |
Option colors
Give an option acolor to show its value as a coloured pill in the admin panel. color is one of gray, blue, green, yellow, red, pink and purple, the names in the OptionColor type.
Radio fields follow the same rules as Select option colors, including where pills appear and how uncoloured values show.
Admin options
Radio fields support the standard field admin options, plus this option:| Option | Type | Default | Description |
|---|---|---|---|
layout | 'horizontal' | 'vertical' | 'horizontal' | Direction the choices are laid out in. |
Example
import type { CollectionConfig } from 'frogbot'
export const Themes: CollectionConfig = {
slug: 'themes',
fields: [
{
name: 'color',
type: 'radio',
options: [
{ label: 'Mint', value: 'mint' },
{ label: 'Dark gray', value: 'dark_gray' },
],
defaultValue: 'mint',
admin: {
layout: 'horizontal',
},
},
],
}
Custom components
Field
Server component
import { RadioGroupField } from '@frogbotai/ui/admin'
import type { RadioFieldServerProps } from 'frogbot'
export const CustomRadioServer = (props: RadioFieldServerProps) => (
<RadioGroupField
field={props.clientField}
path={props.path}
permissions={props.permissions}
schemaPath={props.schemaPath}
/>
)
Client component
'use client'
import { RadioGroupField } from '@frogbotai/ui/admin'
import type { RadioFieldClientProps } from 'frogbot'
export const CustomRadioClient = (props: RadioFieldClientProps) => <RadioGroupField {...props} />
Label
Server component
import { FieldLabel } from '@frogbotai/ui/admin'
import type { RadioFieldLabelServerProps } from 'frogbot'
export const CustomRadioLabelServer = ({ clientField, path }: RadioFieldLabelServerProps) => (
<FieldLabel
label={clientField.label || clientField.name}
path={path}
required={clientField.required}
/>
)
Client component
'use client'
import { FieldLabel } from '@frogbotai/ui/admin'
import type { RadioFieldLabelClientProps } from 'frogbot'
export const CustomRadioLabelClient = ({ field, path }: RadioFieldLabelClientProps) => (
<FieldLabel label={field.label || field.name} path={path} required={field.required} />
)