Search

Library

UDS Base

Repository

github.com/telus/universal-design-system

Package

npmjs.com/package/@telus-uds/components-base

Package version

1.6.1

Loading...

<Search />

<Search />

Introduction

import { Search } from '@telus-uds/components-base'

Use Search for text-based searching or filtering with optional autocomplete functionality.

Guidance

Search includes a clear button, which will appear as text is entered and pressing it will cause the input's internal state value to be set to an empty string.

Updating parent on changes

Use the onChange prop to react to value changes and the onSubmit prop to react on search submission.

Loading...

function SearchWithCallbacks() { const [value, setValue] = useState('') const [submitted, setSubmitted] = useState() return ( <StackView space={2}> <Search onChange={setValue} onSubmit={setSubmitted} /> <Typography> Current value is: <Typography variant={{ bold: true }}>{value}</Typography> </Typography> <Typography> Submitted value was: <Typography variant={{ bold: true }}>{submitted}</Typography> </Typography> </StackView> ) }

function SearchWithCallbacks() {
  const [value, setValue] = useState('')
  const [submitted, setSubmitted] = useState()

  return (
    <StackView space={2}>
      <Search onChange={setValue} onSubmit={setSubmitted} />

      <Typography>
        Current value is: <Typography variant={{ bold: true }}>{value}</Typography>
      </Typography>
      <Typography>
        Submitted value was: <Typography variant={{ bold: true }}>{submitted}</Typography>
      </Typography>
    </StackView>
  )
}

Search is based on TextInput, plus two custom buttons. Unlike other input components, however, this component may only be used as "uncontrolled" where the content of the text input is set only by user interaction. The search text state is managed internally based on user input and may not be "controlled" by a parent component.

Accessibility

Use the copy prop to select english or french copy for the accessibility labels. You may also pass in a custom dictionary object.

Props

Name	Type	Default	Description
initialValue	string	''	Use this to set the initial value of the search input. Updating `initialValue` will **not** update the actual value.
placeholder	string	'Search'	Label rendered in the search input when it has no value.
copy	union	'en'	Select english or french copy for the accessible labels. You may also pass in a custom dictionary object.
inactive	bool		Disables all user interactions with the search input.
onChange	func		Use to react upon search input's value changes. Will receive the searched value as an argument.
onSubmit	func		Triggered when the search input is submitted, either by pressing the submit button, "Enter" key on web, or "Search" key in a mobile keyboard.
onClear	func		Triggered when the clear button is pressed.
accessibilityLabel	string		Use to provide an accessible label for the input (visually hidden).
tokens	custom		System tokens prop, see tokens for more details
variant	objectOf		System variant prop, see variants for more details