> ## 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.

# Radio Group Field

> Choose one value from a predefined radio-button group.

The Radio field stores one value from a predefined list and presents the choices as a radio-button group.

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

export const Theme: Field = {
  name: 'theme',
  type: 'radio',
  defaultValue: 'light',
  options: [
    { label: 'Light', value: 'light' },
    { label: 'Dark', value: 'dark' },
  ],
}
```

Options may be strings or `{ label, value }` objects.

## 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` | `'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](#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](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` 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`. |
| `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.

## Option colors

Give an option a `color` 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](https://docs.frogbot.ai/fields/select.md#option-colors), including where pills appear and how uncoloured values show.

## Admin options

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

| Option | Type | Default | Description |
| - | - | - | - |
| `layout` | `'horizontal' \| 'vertical'` | `'horizontal'` | Direction the choices are laid out in. |

## Example

```ts theme={"theme":"tokyo-night"}
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

```tsx theme={"theme":"tokyo-night"}
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

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

import { RadioGroupField } from '@frogbotai/ui/admin'
import type { RadioFieldClientProps } from 'frogbot'

export const CustomRadioClient = (props: RadioFieldClientProps) => <RadioGroupField {...props} />
```

### Label

#### Server component

```tsx theme={"theme":"tokyo-night"}
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

```tsx theme={"theme":"tokyo-night"}
'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} />
)
```


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