Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    SearchInput

    A search field with a clear button, debounced search and a loading state.

    Storybook
    Storybook
    Source
    Source

    Installation

    Section titled “Installation”
    Package
    @bigbang/ui
    Import
    import { SearchInput } from '@bigbang/ui';
    Source
    SearchInput.tsx
    Storybook
    SearchInput · Playground

    SearchInput is in the @bigbang/ui package.

    import { SearchInput } from '@bigbang/ui';
    

    <SearchInput label="Search" hideLabel placeholder="Search by name" loading={fetching} onSearch={setQuery} />;

    Props

    Section titled “Props”
    labelRequired
    Description
    The name of the search, bound to the input with <label>. Required even when hideLabel hides it.
    Type
    string
    hideLabel
    Description
    Hides the label visually; screen readers still read it. Use it only where the search is obvious from its place, such as above a list.
    Type
    boolean
    Default
    false
    description
    Description
    Help text under the field, linked with aria-describedby.
    Type
    ReactNode
    value
    Description
    Controlled query. Pass it with onValueChange.
    Type
    string
    defaultValue
    Description
    Initial query when the field is uncontrolled.
    Type
    string
    onValueChange
    Description
    Called on every change, including clearing (with '').
    Type
    (value: string) => void
    onSearch
    Description
    Called once the user pauses typing for debounceMs, and at once when the field is cleared. Use it for search-as-you-type.
    Type
    (query: string) => void
    debounceMs
    Description
    Pause in milliseconds before onSearch runs.
    Type
    number
    Default
    300
    onSubmit
    Description
    Called with the query when the user presses Enter.
    Type
    (query: string) => void
    loading
    Description
    Replaces the search icon with a spinner while results load, and announces it once. The field stays editable.
    Type
    boolean
    Default
    false
    loadingLabel
    Description
    Text announced once when loading starts. Without it, ui.search.loading is announced ("Aranıyor" or "Searching").
    Type
    string
    landmark
    Description
    Wraps the field in a role="search" landmark. Use it for the main search of a page, once per page.
    Type
    boolean
    Default
    false
    placeholder
    Description
    Text shown while the field is empty: say what can be searched ("Ada göre ara"). It does not replace the label.
    Type
    string
    size
    Description
    Input height: 32, 36 and 40 px.
    Type
    'sm' | 'md' | 'lg'
    Default
    'md'
    disabled
    Description
    Disables the field and its label.
    Type
    boolean
    Default
    false
    name
    Description
    Field name used when the form is submitted.
    Type
    string
    className
    Description
    Added to the root element; use it for layout only.
    Type
    string

    Data attributes

    Section titled “Data attributes”
    • data-component="search-input": on the root element.
    • data-part: label, box, icon or spinner, control, clear, description.