Fluent Commerce Docs

Home
Essential Knowledge
By Type
Building Blocks
APIs
Releases

Content in this track:

Filter Panel: Configuration, Customization, and Best Practices

Complex Filter Configuration: Tips and Techniques

Using Predefined Values in Order Tag Filters

Enable the Status Filter with Predefined Values

Building Better Filters: From Reusable Components to Customer Search

End Of Track

Content in this track: Select Field Component

UI Component

Changed on:

11 Aug 2025

Overview

The Select Component is a field component designed for use in any form. It allows users to view a list of options as a drop-down regardless of the number of items in the list. This sets it apart from the field, which displays a drop-down only when the list contains more than three items; otherwise, it switches to a radio button group. The component supports flexible value sourcing. It can retrieve options either via a query, from a predefined setting, or from a manifest.

Plugin Name	Core

The standard library of mystique components.

0000-00-00

v1.0.0

Initial changelog entry.

Alias

select

Detailed technical description

The Select Component supports three primary methods for retrieving options:

Query: Fetches options dynamically using a GraphQL query.

1{
2    "component": "select",
3    "props": {
4        "extensions": {
5            "queryValues": {
6                "query": "...",
7                "variables": {
8                    "retailerRefs": "{{activeRetailer.ref}}"
9                },
10                "label": "{{node.name}}",
11                "value": "{{node.ref}}",
12            }
13        }
14    },
15},

Setting: Loads options from a predefined setting.

1{
2    "component": "select",
3    "props": {
4        "extensions": {
5            "source": "fc.mystique.inventory.search.inventory.position.stock.statuses"
6        }
7    },
8},

Manifest: Extracts options from the component’s manifest file.

1{
2    "component": "select",
3    "props": {
4        "options":[
5            {
6                "label":"ACTIVE",
7                "value":"ACTIVE"
8            },
9            {
10                "label":"INACTIVE",
11                "value":"INACTIVE"
12            }
13        ],  
14    } 
15},

Additional Information

1"overrides": {
2    "status": {
3        "extensions": {
4            "hideDefaultValue": true,
5            "source": "fc.mystique.inventory.search.inventory.position.stock.statuses"
6        }
7    },
8},

Properties

Name	Type	Required	Default Value	Description
label	`string`	No	None	The label that will be displayed on the field.
defaultValue	`string`	No	None	The default value for the field.
options	`Options`	No	None	Defines the available options for the dropdown.
extensions	`Extensions`	No	None	Allows additional customization through extra properties.

Extensions

Name	Type	Required	Default Value	Description
hideDefaultValue	`boolean`	No	`false`	If enabled, it displays the field with no preselected options.
source	`string`	No	None	Defines the name of the JSON setting that specifies the available options for the component. The structure of the JSON can vary based on the required format. Example Configurations: Basic List: A simple array of values for straightforward use cases. `["value1","value2"]` Options with Labels: Suitable for components that need both a display label and a corresponding value. `[` `{"label":"Label 1","value":"value1"},` `{"label":"Label 2","value":"value2"}` `]` Custom Naming: Offers flexibility by using `name` instead of `label`. Ideal for unique naming conventions. `[` `{"name":"name1","value":"value1"},` `{"name":"name2","value":"value2"}` `]`
queryValues	`QueryValues`	No	None	Defines parameters for retrieving options through a query.

Options

Name	Type	Required	Default Value	Description
name	`string`	No	None	The display name of the option in the dropdown. Defaults to `value` if omitted.
value	`string/number/boolean/object`	Yes	None	The required value associated with the option.

QueryValues

Name	Type	Required	Default Value	Description
`query`	string	Yes	None	The GraphQL query used to retrieve the options.
`variables`	object	No	None	Variables used in the query.
`label`	string	No	None	Path to extract the labels from the query.
`value`	string	No	None	Path to extract the values from the query.

Configuration example

1{
2    "component": "select",
3    "props": {
4        "label": "Product catalogue",
5        "defaultValue": "DEFAULT:1",
6        "extensions": {
7            "queryValues": {
8                "query": "query productCatalogues($retailerRefs: [[String]]) {\n  productCatalogues(retailerRefs: $retailerRefs) {\n    edges {\n      node {\n        ref\n      }\n    }\n  }\n}\n",
9                "variables": {
10                    "retailerRefs": "{{activeRetailer.ref}}"
11                },
12                "label": "{{node.name}}",
13                "value": "{{node.ref}}"
14            }
15        }
16    }
17}

Version History

2025-01-08

v1.0.0

Initial release

Recommended Placement

The Select Component is ideal for use in forms as an additional field type. It can also be configured to replace existing radio button groups with dropdown menus for improved usability and a more compact UI.