# Atproto Handle Popup

## Example

```svelte
<script lang="ts">
	import { AtprotoHandlePopup, toast } from '@foxui/all';
</script>

<AtprotoHandlePopup onselected={(actor) => toast.success(`Selected handle: ${actor.handle}`)} />
```

## Documentation

## Usage

```svelte
<ATProtoHandlePopup 
	onselected={(actor) => console.log('Selected actor:', actor)} />
```

## Sources

This component uses the bits-ui component: Command, see here for the documentation for that: https://bits-ui.com/docs/components/command/llms.txt

## API Reference

### AtprotoHandlePopup
An autocomplete input for searching and selecting AT Protocol (Bluesky) user handles. Uses bits-ui Command for the combobox behavior.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| value | `string` | `-` | The current input value. (bindable) |
| onselected | `(actor: { handle: string; displayName: string; avatar: string; did: string }) => void` | `-` | Callback invoked when a user profile is selected from the results. |
| ref | `HTMLInputElement` | `-` | Reference to the input element. (bindable) |