SearchField

A text input for search queries, with a clear button.

SearchField.tsx

import {SearchField} from 'alinea/components'

export function SearchFieldExample() {
  return (
    <SearchField
      aria-label="Search entries"
      placeholder="Search entries"
      defaultValue="linen"
      style={{width: 280}}
    />
  )
}

Props

A text input for search queries with a clear button. The icon is shown inside the input, in front of the query.

PropTypeDefaultDescription

valuestringDefault –

defaultValuestringDefault –

onValueChange(value: string) => voidDefault –

onSubmit(value: string) => voidDefault –Called when the user presses enter

onClear() => voidDefault –Called when the user clears the field with the clear button or escape

placeholderstringDefault –

loadingbooleanDefault –Shows a spinner while results are being loaded

namestringDefault –

autoFocusbooleanDefault –

onBlur(event: FocusEvent<HTMLInputElement>) => voidDefault –

onFocus(event: FocusEvent<HTMLInputElement>) => voidDefault –

onKeyDown(event: KeyboardEvent<HTMLInputElement>) => voidDefault –

role'searchbox' | 'combobox'Default –Set to combobox when the field controls a list of results that is navigated with the arrow keys while focus stays in the field (together with aria-controls and aria-activedescendant), defaults to searchbox

aria-controlsstringDefault –The id of the results a combobox controls

aria-activedescendantstringDefault –The id of the active result within the results a combobox controls

aria-expandedbooleanDefault –Whether the results a combobox controls are shown

aria-haspopup'listbox' | 'grid' | 'tree' | 'dialog'Default –The kind of element holding the results a combobox controls

aria-autocomplete'list' | 'none'Default –

labelReactNodeDefault –

descriptionReactNodeDefault –

errorReactNodeDefault –

requiredbooleanDefault –

disabledbooleanDefault –

readOnlybooleanDefault –

iconIconType | ReactElementDefault –

sharedbooleanDefault –Marks the field as shared between translations

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.