# Select (Deprecated)

## Overview

Single-selection dropdown built on Radix Select.

- ⚠️ This component is deprecated. Prefer `AppSelect` for new code.

---

## Subcomponents & Props

- **Select**: Root container with optional label
  - `size`: `"sm" | "default" | "lg"` (default `"default"`)
  - `label`: `string | React.ReactNode`
  - `className`, `labelClassName`
- **SelectTrigger**: Button that opens the list
  - `size?`: optional override of context size
- **SelectContent**: Floating list panel (Radix Content props)
- **SelectGroup**: Group wrapper
- **SelectItem**: Option row
- **SelectLabel**: Group label
- **SelectSeparator**: Separator line
- **SelectValue**: Selected value placeholder/slot
- **SelectScrollUpButton / SelectScrollDownButton**: Scroll affordances

Root also exposes typical controlled props from Radix (`value`, `defaultValue`, `onValueChange`, `disabled`, `required`, `name`).

---

## Behavior

- **Sizes**: `size` controls trigger height and font size.
- **Keyboard**: Typeahead, arrow navigation, Enter/Space to select.
- **Accessibility**: Labels via `Label` + `htmlFor`/`id`.

---

## Examples

### Interactive

```tsx
import { useState } from "react";
import { Label } from "laif-ds";
import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectGroup,
  SelectLabel,
  SelectItem,
  SelectSeparator,
} from "laif-ds";

export function InteractiveSelect() {
  const [value, setValue] = useState("");
  return (
    <div className="w-full max-w-sm space-y-6">
      <div className="space-y-2">
        <Label htmlFor="framework">Framework</Label>
        <Select value={value} onValueChange={setValue}>
          <SelectTrigger id="framework" className="w-full">
            <SelectValue placeholder="Seleziona un framework" />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectLabel>Frontend</SelectLabel>
              <SelectItem value="react">React</SelectItem>
              <SelectItem value="vue">Vue</SelectItem>
              <SelectItem value="angular">Angular</SelectItem>
            </SelectGroup>
            <SelectSeparator />
            <SelectGroup>
              <SelectLabel>Backend</SelectLabel>
              <SelectItem value="node">Node.js</SelectItem>
              <SelectItem value="django">Django</SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
      </div>
    </div>
  );
}
```

### Sizes

```tsx
import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from "laif-ds";

export function SelectSizes() {
  return (
    <div className="flex flex-col space-y-4">
      <Select>
        <SelectTrigger size="sm" className="w-[180px]">
          <SelectValue placeholder="Small" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="1">Opzione 1</SelectItem>
          <SelectItem value="2">Opzione 2</SelectItem>
        </SelectContent>
      </Select>

      <Select>
        <SelectTrigger className="w-[180px]">
          <SelectValue placeholder="Default" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="1">Opzione 1</SelectItem>
          <SelectItem value="2">Opzione 2</SelectItem>
        </SelectContent>
      </Select>
    </div>
  );
}
```

---

## Notes

- **Use AppSelect**: Prefer `AppSelect` for production features (search, multiselect, async, etc.).
- **A11y**: Keep labels synchronized with triggers using `id` and `htmlFor`.