# Select

## Example

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

	let selected = $state('Banana');
</script>

<Select
	bind:value={selected}
	type="single"
	items={[
		{ value: 'Apple', label: 'Apple' },
		{ value: 'Orange', label: 'Orange' },
		{ value: 'Banana', label: 'Banana' }
	]}
/>
```

## Documentation

## Usage

```svelte
<Select
	bind:value={selected}
	type="single"
	items={[
		{ value: 'Apple', label: 'Apple' },
		{ value: 'Orange', label: 'Orange' },
		{ value: 'Banana', label: 'Banana' }
	]}
/>
```

## Sources

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

## API Reference

### Select
A dropdown select menu. Built on top of the bits-ui Select primitive.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| value | `string | string[]` | `-` | The currently selected value. (bindable) |
| items | `{ value: string; label: string; disabled?: boolean }[]` | `-` | The list of items to display in the select dropdown. (required) |
| placeholder | `string` | `-` | Placeholder text shown when no value is selected. |
| type | `'single' | 'multiple'` | `'single'` | Whether the select allows single or multiple selections. |
| open | `boolean` | `false` | Whether the select dropdown is open. (bindable) |
| onValueChange | `(value: string) => void` | `-` | A callback invoked when the selected value changes. |
| onOpenChange | `(open: boolean) => void` | `-` | A callback invoked when the dropdown open state changes. |
| disabled | `boolean` | `false` | Whether the select is disabled. |
| name | `string` | `-` | The name of the select used in form submission. |
| required | `boolean` | `false` | Whether the select is required. |
| loop | `boolean` | `false` | Whether keyboard navigation loops from last item to first and vice versa. |
| allowDeselect | `boolean` | `false` | Whether the user can deselect the selected item. |
| contentProps | `Select.ContentProps` | `-` | Additional props to pass to the underlying Select.Content component (positioning, collision, etc.). |