lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubIntegrationsAngularVueReactDemosFoundationThemesTypographyIconsPopoversInternationalizationDrag and DropKeyboard NavigationLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPagePaginationPanelPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVClipboardColumn 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
valuestring | number | FormData | Filecontrol value
disabledbooleandetermines if element is mutable or focusable
requiredbooleanindicates that the user must specify a value for the input before the owning form can be submitted
readonlybooleanmakes the element not mutable, meaning the user can not edit the control
multiplebooleandetermines he form control accepts one or more values
autocompletestringprovide automated assistance in filling out form field values, and guidance to the browser as to the type of information expected in the field
typestringstring specifying the type of control to render
formNoValidatebooleandetermines if the form control is novalidate
namestringrepresents the name of the current
element as a string.
patternstringregular expression the form control's value should match
placeholderstringdefines a short hint to help the user with data entry when a form control has no value
minLengthnumberdefines minimum number of characters
maxLengthnumberdefines maximum number of characters
minnumberdefines the most negative value in the range of permitted values
maxnumberdefines the greatest value in the range of permitted values
sizenumberdetermines number of characters
formAssociatedboolean
valueAsNumber
composedLabel
focus
reset

Attributes

NameTypesDescription
valuestring | number | FormData | Filecontrol value
disabledbooleandetermines if element is mutable or focusable
requiredbooleanindicates that the user must specify a value for the input before the owning form can be submitted
readonlybooleanmakes the element not mutable, meaning the user can not edit the control
multiplebooleandetermines he form control accepts one or more values
autocompletestringprovide automated assistance in filling out form field values, and guidance to the browser as to the type of information expected in the field
typestringstring specifying the type of control to render
formNoValidatebooleandetermines if the form control is novalidate
patternstringregular expression the form control's value should match
placeholderstringdefines a short hint to help the user with data entry when a form control has no value
minLengthnumberdefines minimum number of characters
maxLengthnumberdefines maximum number of characters
minnumberdefines the most negative value in the range of permitted values
maxnumberdefines the greatest value in the range of permitted values
sizenumberdetermines number of characters

CSS Properties

NameTypesDescription
--background
--color
--border
--border-radius
--outline
--outline-offset
--padding
--font-size
--line-height
--height
--min-width
--cursor
--width

Slots

NameTypesDescription
defaultFor projecting select and label