Getting StartedInstallationSupportChangelogGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton Icon GroupButton SortCardCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleRadioRangeSearchSelectShellSwitchTabsTagTextareaTimeToastTooltipData GridGetting StartedFooterPlaceholderAsyncResponsiveScroll HeightPaginationBordersHoverColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

The select input component allows users to select an option from a dropdown list of options. The options are displayed when the user clicks on the select input.

Example

Option OneOption TwoOption Threemessage text
code
<script type="module">
  import '@blueprintui/components/include/select.js';
</script>

<bp-field>
  <label>select</label>
  <bp-select>
    <bp-option value="1">Option One</bp-option>
    <bp-option value="2" selected>Option Two</bp-option>
    <bp-option value="3">Option Three</bp-option>
  </bp-select>
  <bp-field-message>message text</bp-field-message>
</bp-field>

Vertical

option oneoption twooption threemessage textoption oneoption twooption threedisabled messageoption oneoption twooption threeerror messageoption oneoption twooption threesuccess message
code
<bp-form-group layout="vertical">
  <bp-field layout="vertical">
    <label>label</label>
    <bp-select>
      <bp-option>option one</bp-option>
      <bp-option>option two</bp-option>
      <bp-option>option three</bp-option>
    </bp-select>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-field layout="vertical">
    <label>disabled</label>
    <bp-select disabled>
      <bp-option>option one</bp-option>
      <bp-option>option two</bp-option>
      <bp-option>option three</bp-option>
    </bp-select>
    <bp-field-message>disabled message</bp-field-message>
  </bp-field>

  <bp-field layout="vertical" status="error">
    <label>error</label>
    <bp-select>
      <bp-option>option one</bp-option>
      <bp-option>option two</bp-option>
      <bp-option>option three</bp-option>
    </bp-select>
    <bp-field-message status="error">error message</bp-field-message>
  </bp-field>

  <bp-field layout="vertical" status="success">
    <label>success</label>
    <bp-select>
      <bp-option>option one</bp-option>
      <bp-option>option two</bp-option>
      <bp-option>option three</bp-option>
    </bp-select>
    <bp-field-message status="success">success message</bp-field-message>
  </bp-field>
</bp-form-group>

Horizontal

option oneoption twooption threemessage textoption oneoption twooption threedisabled messageoption oneoption twooption threeerror messageoption oneoption twooption threesuccess message
code
<bp-form-group layout="horizontal">
  <bp-field layout="horizontal">
    <label>label</label>
    <bp-select>
      <bp-option>option one</bp-option>
      <bp-option>option two</bp-option>
      <bp-option>option three</bp-option>
    </bp-select>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-field layout="horizontal">
    <label>disabled</label>
    <bp-select disabled>
      <bp-option>option one</bp-option>
      <bp-option>option two</bp-option>
      <bp-option>option three</bp-option>
    </bp-select>
    <bp-field-message>disabled message</bp-field-message>
  </bp-field>

  <bp-field layout="horizontal" status="error">
    <label>error</label>
    <bp-select>
      <bp-option>option one</bp-option>
      <bp-option>option two</bp-option>
      <bp-option>option three</bp-option>
    </bp-select>
    <bp-field-message status="error">error message</bp-field-message>
  </bp-field>

  <bp-field layout="horizontal" status="success">
    <label>success</label>
    <bp-select>
      <bp-option>option one</bp-option>
      <bp-option>option two</bp-option>
      <bp-option>option three</bp-option>
    </bp-select>
    <bp-field-message status="success">success message</bp-field-message>
  </bp-field>
</bp-form-group>

Compact

option oneoption twooption threemessage textoption oneoption twooption threedisabled messageoption oneoption twooption threeerror messageoption oneoption twooption threesuccess message
code
<bp-form-group layout="compact">
  <bp-field layout="compact">
    <label>label</label>
    <bp-select>
      <bp-option>option one</bp-option>
      <bp-option>option two</bp-option>
      <bp-option>option three</bp-option>
    </bp-select>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-field layout="compact">
    <label>disabled</label>
    <bp-select disabled>
      <bp-option>option one</bp-option>
      <bp-option>option two</bp-option>
      <bp-option>option three</bp-option>
    </bp-select>
    <bp-field-message>disabled message</bp-field-message>
  </bp-field>

  <bp-field layout="compact" status="error">
    <label>error</label>
    <bp-select>
      <bp-option>option one</bp-option>
      <bp-option>option two</bp-option>
      <bp-option>option three</bp-option>
    </bp-select>
    <bp-field-message status="error">error message</bp-field-message>
  </bp-field>

  <bp-field layout="compact" status="success">
    <label>success</label>
    <bp-select>
      <bp-option>option one</bp-option>
      <bp-option>option two</bp-option>
      <bp-option>option three</bp-option>
    </bp-select>
    <bp-field-message status="success">success message</bp-field-message>
  </bp-field>
</bp-form-group>

Install

NPM

// npm package
import '@blueprintui/components/include/select.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/select.js/+esm';
</script>

Select Input Component

Usage

The Select Input component provides a dropdown list to select a value from a set of predefined options.

Accessibility

  • The currently focused option should be highlighted as the user navigates the options with the keyboard.
  • The Select Input component should have a descriptive label or aria-label attribute if no visible label is present.

bp-select

Events

NameTypesDescription
inputInputEventoccurs when the value changes
changeInputEventoccurs when the value changes

Properties

NameTypesDescription
valuestring | FormData
disabledboolean
requiredboolean
readonlyboolean | undefined
multipleboolean
autocompletestring
typestring
namestring
patternstring
placeholderstring
minLengthnumber
maxLengthnumber
minnumber
maxnumber
sizenumber
valueAsNumber
formAssociatedboolean

Attributes

NameTypesDescription
valuestring | FormData
disabledboolean
requiredboolean
readonlyboolean | undefined
multipleboolean
autocompletestring
typestring
namestring
patternstring
placeholderstring
minLengthnumber
maxLengthnumber
minnumber
maxnumber
sizenumber

Slots

NameTypesDescription
defaultFor projecting select and label