Selectors overview

In FOLIO, there are several different components and patterns that can be used to choose data from a controlled vocabulary. The purpose of this page is to help you choose the one that is right for your use case.

 

The overview below should be read as a decision tree: Please start with the choosing the most relevant section for your use case at the top level (i.e. the biggest headlines). Once you have done that, please proceed to do the same for each level of the chosen section until you reach the lowest level of the section in question, which will provide you with the recommended solution for your use case.

 

The user is turning one individual value on or off

• You are designing a section of a Search & filter pane:
  • Use a Filter Group component containing a single Checkbox component.
• You are designing a section of a dropdown component to contain a list of options, preferences or settings:
  • Use a Menu Section component containing a single Checkbox component.
• You are designing something other than the above:
  • Use a single Checkbox component.

 

The user is choosing one single option from a range of options

There are 5 or fewer options in total to choose from

• You are designing a section of a Search & filter pane:
  • You have room in your layout
    • Use a Filter Group component containing a list of Radio Button components.
  • You do not have room in your layout
    • Use a Filter Group component containing a Select component.
• You are designing a section of a dropdown component to contain a list of options, preferences or settings:
  • You have room in your layout
    • Use a Menu Section component containing a list of Radio Button components.
  • You do not have room in your layout
    • Use a Menu Section component containing a Select component.
• You are designing something other than the above:
  • You have room in your layout:
    • Use a list of Radio Button components.
  • You do not have room in your layout:
    • Use a Select component.

 

There are more than 5 options in total to choose from

• You are designing a section of a Search & filter pane:
  • Use a Filter Group component containing a Selection component.
• You are designing a section of a dropdown component to contain a list of options, preferences or settings:
  • Use a Menu Section component containing a Selection component.
• You are designing something other than the above:
  • Use a Selection component.

 

The user is choosing one or more options from a range of options

There are 5 or fewer options in total to choose from

• You are designing a section of a Search & filter pane:
  • You have room in your layout
    • Use a Filter Group component containing a list of Checkbox components.
  • You do not have room in your layout
    • Use a Filter Group component containing a Multi-select component.
• You are designing a section of a dropdown component to contain a list of options, preferences or settings:
  • You have room in your layout
    • Use a Menu Section component containing a list of Checkbox components.
  • You do not have room in your layout
    • Use a Menu Section component containing a Multi-select component.
• You are designing something other than the above:
  • Use a list of Checkbox components

 

There are more than 5 options in total to choose from

• You are designing a section of a Search & filter pane:
  • Use a Filter Group component containing a Multi-select component.
• You are designing a section of a dropdown component to contain a list of options, preferences or settings:
  • Use a Menu Section component containing a Multi-select component.
• You are designing something other than the above:
  • Use a Multi-select component.