Search

Basic usage

Search is a controlled component. Pass the current query as value and update it from onValueChange, which receives the next value as a string (an empty string when the field is cleared).

import {useState} from 'react'
import {Search} from '@pleo-io/telescope'


const EmployeeSearch = () => {
    const [query, setQuery] = useState('')


    return <Search label="Search employees" value={query} onValueChange={setQuery} />
}

The label is rendered as a visually hidden <label>, so screen readers announce what the field searches. The component is wrapped in a role="search" landmark.

Placeholder

When no placeholder is passed, Search uses the localised default from the TelescopeProvider translations (Search.Placeholder). Pass placeholder to override it for a specific context.

<Search
    label="Search employees"
    placeholder="Find a person"
    value={query}
    onValueChange={setQuery}
/>

Other props

Search also accepts the Input props (except variant, prefix, postfix and type) and the native input props, for example disabled, id and onChange. onChange is still called alongside onValueChange.

Localisation

The default placeholder is read from the TelescopeProvider translations as Search.Placeholder.

API reference