# Avatar Select
URL: /docs/web/components/avatar-select

Avatar Select component with multiple variants and sizes.

**Demo:**

```tsx
'use client';

import { useState } from 'react';

import { AvatarSelect } from '@docyrus/ui/components/avatar-select';
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 AvatarSelectDemo() {
  type EditorDisplay = 'inline' | 'popover';
  const [editorDisplay, setEditorDisplay] = useState
                  
                    
                  
                
              </div>
              <label className="flex items-center gap-2">
                
                <span className="text-xs">disabled</span>
              </label>
            </div>
          </div>
        </div>
      </div>
      
    </div>
  );
}
```

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/ui-avatar-select
```

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

## Usage

```tsx
import {
  AvatarSelect
} from "@docyrus/ui/components/avatar-select";

<AvatarSelect
  editorDisplay="inline"
  value={...}
  disabled
  uploadImage={() => {}}
  onChange={() => {}}
  onCommit={() => {}}
/>
```

## EditorDisplay

| EditorDisplay | Description |
|---------------|-------------|
| `inline` | Inline — `space-y-3` |
| `popover` | Popover — `inline-flex` |

## API Reference

| Prop | Type | Default |
|------|------|---------|
| `editorDisplay` | `"inline"` \| `"popover"` | `"default"` |
| `value` | `Partial<AvatarFieldValue> \| null` | — |
| `disabled` | `boolean` | — |
| `uploadImage` | `(file: File) => Promise<AvatarImageValue>` | — |
| `onChange` | `(value: AvatarFieldValue, payload: Record<string, unknown>) => void` | — |
| `onCommit` | `(value: AvatarFieldValue, payload: Record<string, unknown>) => void` | — |
| `className` | `string` | — |