Skip to main content
Version: 2.0.0-alpha

Select fields

Simple select field

Field

You can use a simple select field when you would like allow the selection of a single value among a limited set of options. Each entry will have a key and a label. You can also customise the color of each entry or disable certain options.

Set the enumValues prop to a valid configuration in a string property. You can define those values as an array of EnumValueConfig or simply as an object with key/value pairs:

import { buildProperty } from "@camberi/firecms";

buildProperty({
dataType: "string",
name: "Category",
enumValues: {
art_design_books: "Art and design books",
backpacks: "Backpacks and bags",
bath: "Bath",
bicycle: "Bicycle",
books: "Books"
}
});

or

import { buildProperty } from "@camberi/firecms";

buildProperty({
dataType: "string",
name: "Currency",
enumValues: [
{ id: "EUR", label: "Euros", color: "blueDark" },
{ id: "DOL", label: "Dollars", color: "greenLight" }
]
});

The data type is string or number.

Internally the component used is SelectFieldBinding.

Multiple select field

Field

You can use a multiple select field when you would like allow the selection of a zero or more values among a limited set of options. Each entry will have a key and a label. You can also customise the color of each entry or disable certain options.

Set the enumValues prop to a valid configuration in a string property. You can define those values as an array of EnumValueConfig or simply as an object with key/value pairs:

import { buildProperty } from "@camberi/firecms";

buildProperty({
name: "Available locales",
dataType: "array",
of: {
dataType: "string",
enumValues: {
"es": "Spanish",
"en": "English",
"fr": {
id: "fr",
label: "French",
disabled: true
}
}
},
defaultValue: ["es"]
});

The data type is array with either string or number properties as the of prop, using enum values.

Internally the component used is SelectFieldBinding.