lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsPopoversLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanColumn ResizeDraggable ColumnsDraggable RowsRow 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
accessordetermines number of characters
valuestring | number | FormData | File
disabledboolean
requiredboolean
readonlyboolean
multipleboolean
autocompletestring
typestring
namestringrepresents the name of the current
element as a string.
patternstring
placeholderstring
minLengthnumber
maxLengthnumber
minnumber
maxnumber
sizenumber
valueAsNumber
formAssociatedboolean
focus
reset

Attributes

NameTypesDescription
accessordetermines number of characters

Slots

NameTypesDescription
defaultFor projecting select and label