Skip to main content

Select

    The Select component allows you to choose one or multiple options from a collapsed dropdown with options.

    OverviewPropertiesUsageAccessibilityChangelog

    When to use​

    • Users should choose one or multiple options from a list of three or more predefined choices.
    • Space is limited. Use this component if there are lots of options to choose from but little space.
    • To support filtering, for example with a large dataset.

    When not to use​

    • There are only two options. Use Radio or Switch for binary choices.
    • Users should toggle a setting on/off for an immediate state change. Use Switch instead.
    • Users should see all the options in the UI. Use Radio for a single selection or Checkbox for multiple selections.
    • Users should trigger an action or navigation, use Menu or Button.

    Show selected options first​

    The showSelectedOptionsFirst property reorders the list of options so the selected options appear at the top of the list. Reordering is triggered when the overlay is closed and reopened.

    • Use this property by default, especially when there are five or more options, or when users will modify the selection frequently, as in filtering.
    • Don't use if there's a logical order to the options. For example, ascending or descending numerical options, or an alphabetical list of countries.

    Content guidelines​

    Add a label that describes the purpose of the select. It should be descriptive but short (1-2 words).

    • Do: Databases
    • Don't: Select a database from the dropdown

    Placeholder (required)​

    • Default text for a single select: Select an option
    • Default text for a multiselect: Select options

    The default placeholder works for most use cases, but if you customize the placeholder, do the following:

    • Use the formula Add + [subject] or [Verb] + [subject].
    • “Add” is the default verb for our placeholders. Don't replace it with alternatives such as “Enter,” “Fill,” or “Type,” unless there's a good reason to do so.
    • Omit unnecessary articles (a, an, the).
    • Don't add periods, ellipses, or exclamation marks.

    Examples:

    • Select database
    • Select editors
    Use hint for essential information

    Don't use the placeholder for information users need to complete the task, as placeholders disappear as soon as users start typing.

    Hint (optional)​

    Use the hint (FormFieldMessages component) for information users need to avoid errors or work efficiently. Always provide any error messages here too.

    Example: Select 1-3 options.

    • Keep the hint short.
    • Add periods after sentences.
    Still have questions?
    Find answers in the Dynatrace Community