Autocomplete

import { Autocomplete } from "@rebasepro/ui";

Props

Prop	Type	Required	Description
children	React.ReactNode	yes
open	boolean	yes
setOpen	(open: boolean) => void	yes
className	string	—

Example

This is the example the design-system sync renders and verifies for this component.

import { Autocomplete, AutocompleteItem, TextField } from "@rebasepro/ui";

// Autocomplete is a controlled dropdown surface (`open`/`setOpen`) meant to
// sit directly under a text input, positioned via its own
// `absolute top-full left-0 right-0` — the parent needs `position: relative`
// and enough room below for the panel.
export const TableSearch = () => (
    <div className="p-4 h-[320px]">
        <div className="relative w-[320px]">
            <TextField label="Search tables" value="use" onChange={() => {}}/>
            <Autocomplete open setOpen={() => {}}>
                <AutocompleteItem>
                    <div className="px-4">users</div>
                </AutocompleteItem>
                <AutocompleteItem>
                    <div className="px-4">user_roles</div>
                </AutocompleteItem>
                <AutocompleteItem>
                    <div className="px-4">user_sessions</div>
                </AutocompleteItem>
            </Autocomplete>
        </div>
    </div>
);