Components
Client Only
Installation
pnpm dlx @docyrus/cli add @docyrus/ui-place-autocompleteUI Primitives(2 components)
npx shadcn@latest add command spinnerUsage
import {
PlaceAutocomplete
} from "@docyrus/ui/components/place-autocomplete";
<PlaceAutocomplete
variant="default"
size="sm"
ref={...}
debounceMs={0}
value="..."
defaultValue="..."
onChange={() => {}}
onPlaceSelect={() => {}}
onResultsChange={(results: PlaceFeature) = void[]}
/>Variants
| Variant | Description |
|---|---|
default | Default style |
outline | Outline — border-border focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 |
ghost | Ghost — border-transparent shadow-none focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 |
Sizes
| Size | Description |
|---|---|
sm | Small — h-8 px-2 text-xs |
default | Default — h-9 px-2.5 text-sm |
lg | Large — h-11 px-3 text-base |
API Reference
| Prop | Type | Default |
|---|---|---|
variant | "default" | "outline" | "ghost" | "default" |
size | "sm" | "default" | "lg" | "default" |
ref | Ref<HTMLInputElement> | — |
debounceMs | number | — |
value | string | — |
defaultValue | string | — |
onChange | (value: string) => void | — |
onPlaceSelect | (feature: PlaceFeature) => void | — |
onResultsChange | (results: PlaceFeature[]) => void | — |
className | string | — |