Sveltia CMS

Appearance

Select Field ​

The Select field type allows users to choose one or more options from a predefined list within the CMS entry form.

Alternative for dynamic or boolean selects

The options in a Select field are meant to be a static list of a small number of choices defined in the configuration file. If you need dynamic options based on other collections, consider using the Relation field type instead. See also our how-to guide on using entry tags for categorization.

For boolean (true/false) selections, consider using the Boolean field type.

User Interface ​

Editor ​

Radio buttons (single select) or checkboxes (multi select) for choosing options. If there are many entries, a dropdown with search functionality will be used instead. Use the dropdown_threshold option to customize when to switch to the dropdown UI.

Preview ​

A string or a list of strings representing the selected option(s).

Data Type ​

It depends on the options. Usually a string or an array of strings, depending on whether the multiple option is set to true or false, but can also be a number or an array of numbers if the options are defined as such.

If the required option is set to false and no option is selected, the value will be null for single select or an empty array for multi select.

Data Validation ​

  • If the required option is set to true, at least one option must be selected.
  • If the multiple option is enabled, the number of selected options must be between the min and max limits, if specified.

Options ​

In addition to the common field options, the Select field supports the following options:

Required Options ​

widget ​

  • Type: string
  • Default: string The options can be defined with custom labels and values. The following example shows a select field for choosing a color with specific hex values. Must be set to select.

options ​

  • Type: array
  • Default: []

An array of options for the select field. Each option can be defined as a string/number or as an object with label and value properties. These options will be presented to the user in the UI.

The following are valid examples of the options configuration:

yaml
options:
  - London
  - Paris
  - New York
toml
options = ["London", "Paris", "New York"]
json
{
  "options": ["London", "Paris", "New York"]
}
js
options: ['London', 'Paris', 'New York'],
yaml
options: [1, 2, 3]
toml
options = [1, 2, 3]
json
{
  "options": [1, 2, 3]
}
js
options: [1, 2, 3],
yaml
options:
  - { label: Toronto, value: YYZ }
  - { label: Vancouver, value: YVR }
  - { label: Montreal, value: YUL }
toml
[[options]]
label = "Toronto"
value = "YYZ"
[[options]]
label = "Vancouver"
value = "YVR"
[[options]]
label = "Montreal"
value = "YUL"
json
{
  "options": [
    { "label": "Toronto", "value": "YYZ" },
    { "label": "Vancouver", "value": "YVR" },
    { "label": "Montreal", "value": "YUL" }
  ]
}
js
options: [
  { label: 'Toronto', value: 'YYZ' },
  { label: 'Vancouver', value: 'YVR' },
  { label: 'Montreal', value: 'YUL' },
],
yaml
options:
  - { label: Red, value: 1 }
  - { label: Green, value: 2 }
  - { label: Blue, value: 3 }
toml
[[options]]
label = "Red"
value = 1
[[options]]
label = "Green"
value = 2
[[options]]
label = "Blue"
value = 3
json
{
  "options": [
    { "label": "Red", "value": 1 },
    { "label": "Green", "value": 2 },
    { "label": "Blue", "value": 3 }
  ]
}
js
options: [
  { label: 'Red', value: 1 },
  { label: 'Green', value: 2 },
  { label: 'Blue', value: 3 },
],

Optional Options ​

default ​

  • Type: string, number, array of strings, or array of numbers
  • Default: null or []

The default value for the field. Should be a string or number for single select, or an array of strings or numbers for multi select, depending on the multiple option.

  • Type: integer
  • Default: 5

The number of options at which to switch from radio buttons/checkboxes to a dropdown UI. If the number of options exceeds this threshold, a dropdown with search functionality will be used.

multiple ​

  • Type: boolean
  • Default: false

Whether to allow selecting multiple options.

min ​

  • Type: integer
  • Default: 0

The minimum number of options required. This enables validation to ensure that users select at least this many options. Ignored if multiple is set to false.

max ​

  • Type: integer
  • Default: Infinity

The maximum number of options allowed. This enables validation to prevent users from selecting more than this many options. Ignored if multiple is set to false.

Examples ​

Single Select ​

The following example shows a basic single select field for choosing a country.

yaml
- name: country
  label: Country
  widget: select
  options:
    - USA
    - Canada
    - Mexico
toml
[[fields]]
name = "country"
label = "Country"
widget = "select"
options = ["USA", "Canada", "Mexico"]
json
{
  "fields": [
    {
      "name": "country",
      "label": "Country",
      "widget": "select",
      "options": ["USA", "Canada", "Mexico"]
    }
  ]
}
js
{
  fields: [
    {
      name: 'country',
      label: 'Country',
      widget: 'select',
      options: ['USA', 'Canada', 'Mexico'],
    },
  ],
}

Output example when “Canada” is selected:

yaml
country: Canada
toml
country = "Canada"
json
{
  "country": "Canada"
}

Custom Labels and Values ​

The options can be defined with custom labels and values. The following example shows a select field for choosing a color with specific hex values.

yaml
- name: color
  label: Color
  widget: select
  options:
    - { label: Red, value: '#FF0000' }
    - { label: Green, value: '#00FF00' }
    - { label: Blue, value: '#0000FF' }
toml
[[fields]]
name = "color"
label = "Color"
widget = "select"
[[options]]
label = "Red"
value = "#FF0000"
[[options]]
label = "Green"
value = "#00FF00"
[[options]]
label = "Blue"
value = "#0000FF"
json
{
  "fields": [
    {
      "name": "color",
      "label": "Color",
      "widget": "select",
      "options": [
        { "label": "Red", "value": "#FF0000" },
        { "label": "Green", "value": "#00FF00" },
        { "label": "Blue", "value": "#0000FF" }
      ]
    }
  ]
}
js
{
  fields: [
    {
      name: 'color',
      label: 'Color',
      widget: 'select',
      options: [
        { label: 'Red', value: '#FF0000' },
        { label: 'Green', value: '#00FF00' },
        { label: 'Blue', value: '#0000FF' },
      ],
    },
  ],
}

Output example when “Green” is selected:

yaml
color: '#00FF00'
toml
color = "#00FF00"
json
{
  "color": "#00FF00"
}

Multi Select with Limits ​

The following example shows a multi select field for choosing fruits, with a minimum of 1 and a maximum of 3 selections.

yaml
- name: fruits
  label: Fruits
  widget: select
  options:
    - Apple
    - Banana
    - Cherry
    - Date
  multiple: true
  min: 1
  max: 3
toml
[[fields]]
name = "fruits"
label = "Fruits"
widget = "select"
options = ["Apple", "Banana", "Cherry", "Date"]
multiple = true
min = 1
max = 3
json
{
  "fields": [
    {
      "name": "fruits",
      "label": "Fruits",
      "widget": "select",
      "options": ["Apple", "Banana", "Cherry", "Date"],
      "multiple": true,
      "min": 1,
      "max": 3
    }
  ]
}
js
{
  fields: [
    {
      name: 'fruits',
      label: 'Fruits',
      widget: 'select',
      options: ['Apple', 'Banana', 'Cherry', 'Date'],
      multiple: true,
      min: 1,
      max: 3,
    },
  ],
}

Output example when “Apple” and “Cherry” are selected:

yaml
fruits:
  - Apple
  - Cherry
toml
fruits = ["Apple", "Cherry"]
json
{
  "fruits": ["Apple", "Cherry"]
}

Released under the MIT License.

Copyright © 2026 Kohei Yoshino