# Place Autocomplete
URL: /docs/web/components/place-autocomplete

Place Autocomplete component with multiple variants and sizes.

**Demo:**

```tsx
'use client';

import { useCallback, useState } from 'react';

import {
  PlaceAutocomplete,
  type PlaceFeature
} from '@docyrus/ui/components/place-autocomplete';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@docyrus/ui/primitives/ui/select';
import { Switch } from '@docyrus/ui/primitives/ui/switch';
import { cn } from '@docyrus/ui/primitives/lib/utils';

export function PlaceAutocompleteDemo() {
  type Variant = 'default' | 'outline' | 'ghost';
  type Size = 'default' | 'sm' | 'lg';

  const [variant, setVariant] = useState
                  
                    
                    
                  
                
              </div>
              <div className="space-y-1.5">
                <span className="text-xs font-medium">Size</span>
                
                  
                    
                    
                  
                
              </div>
              <label className="flex items-center gap-2">
                
                <span className="text-xs">Disabled</span>
              </label>
            </div>
          </div>
        </div>
      </div>
      <div className="mx-auto max-w-md space-y-3">
        
        {selected ? (
          <div className="rounded-lg border border-border bg-muted/30 p-3 text-xs">
            <p className="mb-1 font-medium text-foreground">{selected.properties.name || selected.properties.street}</p>
            <p className="text-muted-foreground">
              Lat: {selected.geometry.coordinates[1].toFixed(6)}, Lng: {selected.geometry.coordinates[0].toFixed(6)}
            </p>
            {selected.properties.city && (
              <p className="text-muted-foreground">City: {selected.properties.city}</p>
            )}
            {selected.properties.country && (
              <p className="text-muted-foreground">Country: {selected.properties.country}</p>
            )}
          </div>
        ) : null}
      </div>
    </div>
  );
}
```

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/ui-place-autocomplete
```

**Dependencies:**
- [class-variance-authority](https://www.npmjs.com/package/class-variance-authority)
- [lucide-react](https://www.npmjs.com/package/lucide-react)

## Usage

```tsx
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` | — |