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
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
| Name | Types | Description |
|---|
input | InputEvent | occurs when the value changes |
change | InputEvent | occurs when the value changes |
Properties
| Name | Types | Description |
|---|
accessor | | determines number of characters |
type | string | |
value | string | number | FormData | File | |
disabled | boolean | |
required | boolean | |
readonly | boolean | |
multiple | boolean | |
autocomplete | string | |
name | string | represents the name of the current |
pattern | string | |
placeholder | string | |
minLength | number | |
maxLength | number | |
min | number | |
max | number | |
size | number | |
valueAsNumber | | |
formAssociated | boolean | |
focus | | |
reset | | |
Attributes
| Name | Types | Description |
|---|
accessor | | determines number of characters |
Slots
| Name | Types | Description |
|---|
prefix | | slot for prefix text or icons |
suffix | | slot for suffic text or icons |