Select

A common form component for choosing a predefined value in a dropdown menu.

Font Family

Usage#

import { Select } from '@backstage/ui';

<Select
    name="font"
    options={[
      { value: 'sans', label: 'Sans-serif' },
      { value: 'serif', label: 'Serif' },
      { value: 'mono', label: 'Monospace' },
      { value: 'cursive', label: 'Cursive' },
    ]}
/>

API reference#

Prop	Type	Default	Responsive
label	string	-	No
description	string	-	No
name	string	-	No
options	Array<{ value: string, label: string }>	-	No
selectionMode	singlemultiple	single	No
placeholder	string	Select an item	No
icon	ReactNode	-	No
value	stringstring[]	-	No
defaultValue	stringstring[]	-	No
size	smallmedium	small	Yes
isOpen	boolean	-	No
defaultOpen	boolean	-	No
disabledKeys	Iterable<Key>	-	No
isDisabled	boolean	-	No
isRequired	boolean	-	No
isInvalid	boolean	-	No
onOpenChange	(isOpen: boolean) => void	-	No
onSelectionChange	(key: Key \| null) => void(keys: Selection) => void	-	No
searchable	boolean	false	No
searchPlaceholder	string	Search...	No
className	string	-	No
style	CSSProperties	-	No

Examples#

With Label and description#

Select component with label and description.

Font Family

Choose a font family for your document

<Select
  name="font"
  label="Font Family"
  description="Choose a font family for your document"
  options={[ ... ]}
/>

Sizes#

Here's a view when the selects have different sizes.

Font Family

<Flex>
  <Select
    size="small"
    label="Font family"
    options={[ ... ]}
  />
  <Select
    size="medium"
    label="Font family"
    options={[ ... ]}
  />
</Flex>

With Icon#

Here's a view when the select has an icon.

Font Family

<Select
  name="font"
  label="Font Family"
  icon={<RiCloudLine />}
  options={[ ... ]}
/>

Disabled#

Here's a view when the select is disabled.

Font Family

<Select
  disabled
  label="Font family"
  options={[ ... ]}
/>

Searchable#

Here's a view when the select has searchable filtering.

Country

<Select
  name="country"
  label="Country"
  searchable
  searchPlaceholder="Search countries..."
  options={[
    { value: 'us', label: 'United States' },
    { value: 'ca', label: 'Canada' },
    { value: 'uk', label: 'United Kingdom' },
    { value: 'fr', label: 'France' },
    { value: 'de', label: 'Germany' },
    // ... more options
  ]}
/>

Multiple Selection#

Here's a view when the select allows multiple selections.

Select multiple options

<Select
  name="options"
  label="Select multiple options"
  selectionMode="multiple"
  options={[
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' },
    { value: 'option3', label: 'Option 3' },
    { value: 'option4', label: 'Option 4' },
  ]}
/>

Searchable with Multiple Selection#

Here's a view when the select combines search and multiple selection.

Skills

<Select
  name="skills"
  label="Skills"
  searchable
  selectionMode="multiple"
  searchPlaceholder="Filter skills..."
  options={[
    { value: 'react', label: 'React' },
    { value: 'typescript', label: 'TypeScript' },
    { value: 'javascript', label: 'JavaScript' },
    { value: 'python', label: 'Python' },
    // ... more options
  ]}
/>

Responsive#

Here's a view when the select is responsive.

<Select
  size={{ initial: 'small', lg: 'medium' }}
  label="Font family"
  options={[ ... ]}
/>

Theming#

Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.

bui-Select
bui-Select[data-size="small"]
bui-Select[data-size="medium"]
bui-SelectPopover
bui-SelectTrigger
bui-SelectTriggerChevron
bui-SelectValue
bui-SelectList
bui-SelectItem
bui-SelectItemIndicator
bui-SelectItemLabel
bui-SelectSearchWrapper
bui-SelectSearch
bui-SelectSearchClear
bui-SelectNoResults

Changelog#

0.9.0 - BREAKING: The SelectProps interface now accepts a generic type parameter for selection mode.

Added searchable and multiple selection support to Select component. The component now accepts searchable, selectionMode, and searchPlaceholder props to enable filtering and multi-selection modes.

Migration: If you're using SelectProps type directly, update from SelectProps to SelectProps<'single' | 'multiple'>. Component usage remains backward compatible. #31649

0.9.0 - Fixed CSS issues in Select component including popover width constraints, focus outline behavior, and overflow handling. #31618
0.7.1 - Fix Select component to properly attach aria-label and aria-labelledby props to the rendered element for improved accessibility. #31037
0.7.1 - Fix Select component to properly attach aria-label and aria-labelledby props to the rendered element for improved accessibility. #31037
0.7.0 - Fixes some styles on the Select component in BUI. #30642
0.7.0 - Remove stylesheet import from Select component. #30800
0.7.0 - Remove stylesheet import from Select component. #30800
0.7.0 - Fixes some styles on the Select component in BUI. #30642
0.4.0 - Fix - Clicking Select label moves focus to trigger #29755
0.3.0 - Add Select component #29440
0.3.0 - Fix Select styles on small sizes + with long option names #29545
0.3.0 - Remove Field from TextField + Select #29482