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 Search component is used for searching for specific content within an application.

Example

code
<script type="module">
  import '@blueprintui/components/include/search.js';
</script>

<bp-field>
  <label>search</label>
  <bp-search></bp-search>
</bp-field>

Vertical

message textdisabled messageerror messagesuccess message
code
<bp-form-group layout="vertical">
  <bp-field>
    <label>label</label>
    <bp-search></bp-search>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-field>
    <label>disabled</label>
    <bp-search disabled></bp-search>
    <bp-field-message>disabled message</bp-field-message>
  </bp-field>

  <bp-field status="error">
    <label>error</label>
    <bp-search></bp-search>
    <bp-field-message status="error">error message</bp-field-message>
  </bp-field>

  <bp-field status="success">
    <label>success</label>
    <bp-search></bp-search>
    <bp-field-message status="success">success message</bp-field-message>
  </bp-field>
</bp-form-group>

Horizontal

message textdisabled messageerror messagesuccess message
code
<bp-form-group layout="horizontal">
  <bp-field layout="horizontal">
    <label>label</label>
    <bp-search></bp-search>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-field layout="horizontal">
    <label>disabled</label>
    <bp-search disabled></bp-search>
    <bp-field-message>disabled message</bp-field-message>
  </bp-field>

  <bp-field layout="horizontal" status="error">
    <label>error</label>
    <bp-search></bp-search>
    <bp-field-message status="error">error message</bp-field-message>
  </bp-field>

  <bp-field layout="horizontal" status="success">
    <label>success</label>
    <bp-search></bp-search>
    <bp-field-message status="success">success message</bp-field-message>
  </bp-field>
</bp-form-group>

Compact

message textdisabled messageerror messagesuccess message
code
<bp-form-group layout="compact">
  <bp-field layout="compact">
    <label>label</label>
    <bp-search></bp-search>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-field layout="compact">
    <label>disabled</label>
    <bp-search disabled></bp-search>
    <bp-field-message>disabled message</bp-field-message>
  </bp-field>

  <bp-field layout="compact" status="error">
    <label>error</label>
    <bp-search></bp-search>
    <bp-field-message status="error">error message</bp-field-message>
  </bp-field>

  <bp-field layout="compact" status="success">
    <label>success</label>
    <bp-search></bp-search>
    <bp-field-message status="success">success message</bp-field-message>
  </bp-field>
</bp-form-group>

Install

NPM

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

CDN

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

Accessibility

  • The search component should have an accessible label or aria-label attribute if no visible label is present.
  • The search component should support keyboard-triggered actions, such as submitting the search query when the "Enter" key is pressed.
  • The search component should provide clear feedback to users when their input is invalid, such as providing an error message or visual indication.

bp-search

Events

NameTypesDescription
inputInputEventoccurs when the value changes
changeInputEventoccurs when the value changes

Properties

NameTypesDescription
accessordetermines number of characters
typestring
valuestring | number | FormData | File
disabledboolean
requiredboolean
readonlyboolean
multipleboolean
autocompletestring
namestringrepresents the name of the current
element as a string.
patternstring
placeholderstring
minLengthnumber
maxLengthnumber
minnumber
maxnumber
sizenumber
formAssociatedboolean
valueAsNumber
composedLabel
focus
reset

Attributes

NameTypesDescription
accessordetermines number of characters

Slots

NameTypesDescription
prefixslot for prefix text or icons
suffixslot for suffic text or icons