Search bar

BETA

Component demo

Interactive example

Web component

React

<ic-search-barlabel="What is your favourite coffee?"></ic-search-bar>

<IcSearchBar
label="What is your favourite coffee?"
options={options}
onIcChange={(ev)=>console.log(ev.detail.value)}
onIcSubmitSearch={(ev)=>console.log(ev.detail.value)}
placeholder="Start typing to search…"
/>

Search bar details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property label Attribute label	The label for the search bar. Required type: string
Property autocapitalize Attribute autocapitalize	The automatic capitalisation of the text value as it is entered/edited by the user. Available options: "off", "none", "on", "sentences", "words", "characters". type: string	"off"
Property autocomplete Attribute autocomplete	The state of autocompletion the browser can apply on the text value. type: IcAutocompleteTypes - "name" \| "on" \| "off" \| "honorific-prefix" \| "given-name" \| "additional-name" \| "family-name" \| "honorific-suffix" \| "nickname" \| "email" \| "username" \| "new-password" \| "current-password" \| "one-time-code" \| "organization-title" \| "organization" \| "street-address" \| "address-line1" \| "address-line2" \| "address-line3" \| "address-level4" \| "address-level3" \| "address-level2" \| "address-level1" \| "country" \| "country-name" \| "postal-code" \| "cc-name" \| "cc-given-name" \| "cc-additional-name" \| "cc-family-name" \| "cc-number" \| "cc-exp" \| "cc-exp-month" \| "cc-exp-year" \| "cc-csc" \| "cc-type" \| "transaction-currency" \| "transaction-amount" \| "language" \| "bday" \| "bday-day" \| "bday-month" \| "bday-year" \| "sex" \| "tel" \| "tel-country-code" \| "tel-national" \| "tel-area-code" \| "tel-local" \| "tel-extension" \| "impp" \| "url" \| "photo"	"off"
Property autocorrect Attribute autocorrect	The state of autocorrection the browser can apply when the user is entering/editing the text value. type: IcAutocorrectStates - "off" \| "on"	"off"
Property autofocus Attribute autofocus	If`true` , the form control will have input focus when the page loads. type: boolean	false
Property charactersUntilSuggestion Attribute characters-until-suggestion	The number of characters until suggestions appear. The submit button will be disabled until the inputted value is equal to or greater than this number. type: number	2
Property debounce Attribute debounce	The amount of time, in milliseconds, to wait to trigger the`icChange` event after each keystroke. type: number	0
Property disableFilter Attribute disable-filter	Specify whether to disable the built in filtering. For example, if options will already be filtered from external source. If`true` , all options provided will be displayed. type: boolean	false
Property disabled Attribute disabled	If`true` , the disabled state will be set. type: boolean	false
Property emptyOptionListText Attribute empty-option-list-text	The text displayed when there are no options in the option list. type: string	"No results found"
Property focusOnLoad Attribute focus-on-load	If`true` , the search bar will be focused when component loaded. type: boolean	false
Property fullWidth Attribute full-width	Specify whether the search bar fills the full width of the container. If`true` , this overrides the --input-width CSS variable. type: boolean	false
Property helperText Attribute helper-text	The helper text that will be displayed for additional field guidance. type: string	""
Property hideLabel Attribute hide-label	If`true` , the label will be hidden and the required label value will be applied as an aria-label. type: boolean	false
Property hintText Attribute hint-text	The hint text for the hidden assistive description element. type: string	"When autocomplete results are available use the up and down arrows to choose and press enter to select"
Property labelField Attribute label-field	The custom name for the label field to correspond with the IcMenuOption type. type: string	"label"
Property loading Attribute loading	Trigger loading state when fetching options asynchronously type: boolean	false
Property loadingErrorLabel Attribute loading-error-label	Change the message displayed when external loading times out. type: string	"Loading Error"
Property loadingLabel Attribute loading-label	Change the message displayed whilst the options are being loaded externally. type: string	"Loading..."
Property name Attribute name