Search bar - Intelligence Community Design System

Show navigation section

Component demo

Interactive example

Web component

React

Show full code

<ic-search-barlabel="What is your favourite coffee?"placeholder="Start typing to search…"></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 assistiveHintText Attribute assistive-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 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 disableAutoFiltering Attribute disable-auto-filtering	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 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	The name of the control, which is submitted with the form data. type: string	this.inputId
Property options	The suggested search options. type: IcMenuOption[] - export interface IcMenuOption { description?: string; disabled?: boolean; recommended?: boolean; children?: IcMenuOption[]; loading?: boolean; timedOut?: boolean; [key: string]: any; element?: { component: any; ariaLabel: string; }; icon?: any; hideLabel?: boolean; htmlProps?: Record<string, any>; }	[]
Property placeholder Attribute placeholder	The placeholder value to display. type: string	"Search"
Property preventFormSubmitOnSearch Attribute prevent-form-submit-on-search	If`true` the parent form will not submit when the icSubmitSearch event fires. type: boolean	false
Property readonly Attribute readonly	If`true` , the readonly state will be set. type: boolean	false
Property required Attribute required	If`true` , the search bar will require a value. type: boolean	false
Property searchMode Attribute search-mode	Specify the mode search bar uses to search.`navigation` allows for quick lookups of a set of values,`query` allows for more general searches. type: IcSearchBarSearchModes - "navigation" \| "query"	"navigation"
Property size Attribute size	The size of the search bar component. type: IcSizesNoLarge - "medium" \| "small"	"medium"
Property spellcheck Attribute spellcheck	If`true` , the value of the search will have its spelling and grammar checked. type: boolean	false
Property theme Attribute theme	Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component. type: IcThemeMode - "dark" \| "inherit" \| "light"	"inherit"
Property timeout Attribute timeout	If using external filtering, set a timeout for when loading takes too long. type: number - number \| undefined
Property value Attribute value	The value of the search input. type: string	""
Property valueField Attribute value-field	The custom name for the value field to correspond with the IcMenuOption type. type: string	"value"

Property

label

Attribute

label

The label for the search bar.

Required

type: string

Property

assistiveHintText

Attribute

assistive-hint-text

The hint text for the hidden assistive description element.

type: string

Default: "When autocomplete results are available use the up and down arrows to choose and press enter to select"

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

Default: "off"

Property

autocomplete

Attribute

autocomplete

The state of autocompletion the browser can apply on the text value.

Default: "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"

Default: "off"

Property

autofocus

Attribute

autofocus

Iftrue , the form control will have input focus when the page loads.

type: boolean

Default: 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

Default: 2

Property

debounce

Attribute

debounce

The amount of time, in milliseconds, to wait to trigger theicChange event after each keystroke.

type: number

Default: 0

Property

disableAutoFiltering

Attribute

disable-auto-filtering

Specify whether to disable the built in filtering. For example, if options will already be filtered from external source. Iftrue , all options provided will be displayed.

type: boolean

Default: false

Property

disabled

Attribute

disabled

Iftrue , the disabled state will be set.

type: boolean

Default: false

Property

emptyOptionListText

Attribute

empty-option-list-text

The text displayed when there are no options in the option list.

type: string

Default: "No results found"

Property

focusOnLoad

Attribute

focus-on-load

Iftrue , the search bar will be focused when component loaded.

type: boolean

Default: false

Property

fullWidth

Attribute

full-width

Specify whether the search bar fills the full width of the container. Iftrue , this overrides the --input-width CSS variable.

type: boolean

Default: false

Property

helperText

Attribute

helper-text

The helper text that will be displayed for additional field guidance.

type: string

Default: ""

Property

hideLabel

Attribute

hide-label

Iftrue , the label will be hidden and the required label value will be applied as an aria-label.

type: boolean

Default: false

Property

labelField

Attribute

label-field

The custom name for the label field to correspond with the IcMenuOption type.

type: string

Default: "label"

Property

Attribute

Trigger loading state when fetching options asynchronously

type: boolean

Default: false

Property

loadingErrorLabel

Attribute

loading-error-label

Change the message displayed when external loading times out.

type: string

Default: "Loading Error"

Property

loadingLabel

Attribute

loading-label

Change the message displayed whilst the options are being loaded externally.

type: string

Default: "Loading..."

Property

name

Attribute

name

The name of the control, which is submitted with the form data.

type: string

Default: this.inputId

Property

options

The suggested search options.

type: IcMenuOption[] - export interface IcMenuOption { description?: string; disabled?: boolean; recommended?: boolean; children?: IcMenuOption[]; loading?: boolean; timedOut?: boolean; [key: string]: any; element?: { component: any; ariaLabel: string; }; icon?: any; hideLabel?: boolean; htmlProps?: Record<string, any>; }

Default: []

Property

placeholder

Attribute

placeholder

The placeholder value to display.

type: string

Default: "Search"