Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    Autocomplete

    A text input that suggests values while the user types but accepts any text.

    Storybook
    Storybook
    Source
    Source

    Installation

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

    Autocomplete is in the @bigbang/ui package.

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

    <Autocomplete label="Bank" name="bank" suggestions={banks} value={value} onValueChange={setValue} />;

    Props

    Section titled “Props”
    labelRequired
    Description
    The visible label of the field.
    Type
    string
    suggestionsRequired
    Description
    Suggestions shown under the field while the user types; the typed text may differ from all of them.
    Type
    readonly string[]
    description
    Description
    Help text under the field, linked with aria-describedby.
    Type
    ReactNode
    error
    Description
    When set, the field is marked invalid and the message is read with the input.
    Type
    string
    invalid
    Description
    Marks the field invalid without a message.
    Type
    boolean
    Default
    false
    required
    Description
    A value is required; the label gets *.
    Type
    boolean
    Default
    false
    value
    Description
    Controlled text. Pass it with onValueChange.
    Type
    string
    defaultValue
    Description
    Initial text when the field is uncontrolled.
    Type
    string
    onValueChange
    Description
    Called with the text whenever it changes, by typing or by choosing a suggestion.
    Type
    (value: string) => void
    placeholder
    Description
    Placeholder text; it does not replace the label.
    Type
    string
    inlineComplete
    Description
    Completes the text in the input with the highlighted suggestion while the user moves through the list.
    Type
    boolean
    Default
    false
    limit
    Description
    Most suggestions shown at once. Without it, all matches are shown.
    Type
    number
    loading
    Description
    Shows a loading row while suggestions come from a server; the list does not filter them again.
    Type
    boolean
    Default
    false
    emptyText
    Description
    Shown in the list when no suggestion matches. Without it, the list closes.
    Type
    string
    showClear
    Description
    Shows a clear button while there is text.
    Type
    boolean
    Default
    false
    size
    Description
    Input height: 32, 36 and 40 px, as TextInput.
    Type
    'sm' | 'md' | 'lg'
    Default
    'md'
    readOnly
    Description
    The text can be read but not changed.
    Type
    boolean
    Default
    false
    disabled
    Description
    Disables the field.
    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="autocomplete": on the root.
    • data-part: control, input, clear, popup, item.
    • data-highlighted, data-popup-open: from Base UI.