Select

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

Examples

With Label and description

Select component with label and description.

<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.

<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.

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

Disabled

Here's a view when the select is disabled.

<Select
  disabled
  label="Font family"
  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-SelectTrigger
• bui-SelectValue
• bui-SelectIcon
• bui-SelectList
• bui-SelectItem
• bui-SelectItemIndicator
• bui-SelectItemLabel

Changelog

• 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