# Select
Simple select API and low-level primitives for custom dropdowns.

## Import/Installation

<Tabs items={[{ label: 'Package', value: 'package' }, { label: 'Registry', value: 'registry' }]}>
  <TabsContent value="package">
    ```tsx
    import { Select } from "@lottiefiles/creator-plugins-ui";
    ```
  </TabsContent>

  <TabsContent value="registry">
    ```bash
    npx shadcn@latest add @lottiefiles/select
    ```
  </TabsContent>
</Tabs>

## Preview

<iframe src="https://creator-plugins-ds.lottiefiles.com/?story=select--default&mode=preview" style={{ width: "100%", border: "1px solid rgba(128, 128, 128, 0.4)", borderRadius: "8px" }} height="380" title="Select component live preview" frameBorder="no" loading="lazy" />

## Usage

```tsx
<Select
  options={[
    { value: "gif", label: "GIF" },
    { value: "mp4", label: "MP4" },
  ]}
  value={value}
  onValueChange={setValue}
/>
```

## Props

<PropsTable
  props={[
  {
    name: "options",
    type: "{ value: string; label: string; disabled?: boolean }[]",
    required: true,
    description: "Array of options to display.",
  },
  {
    name: "value",
    type: "string",
    description: "The controlled value of the select.",
  },
  {
    name: "defaultValue",
    type: "string",
    description: "The default value when uncontrolled.",
  },
  {
    name: "onValueChange",
    type: "(value: string) => void",
    description: "Callback fired when the value changes.",
  },
  {
    name: "placeholder",
    type: "string",
    default: '"Select an option"',
    description: "Placeholder text when no value is selected.",
  },
  {
    name: "disabled",
    type: "boolean",
    default: "false",
    description: "Whether the select is disabled.",
  },
]}
/>

Built on [Base UI Select](https://base-ui.com/react/components/select). For more granular control, the library also exports the lower-level primitives `SelectRoot`, `SelectGroup`, `SelectValue`, `SelectTrigger`, `SelectContent`, `SelectLabel`, `SelectItem`, `SelectItemWithDescription`, `SelectSeparator`, `SelectScrollUpButton`, and `SelectScrollDownButton`.