# Select
URL: /lynx/components/select
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/lynx/components/select.mdx

트리거를 눌러 native overlay의 목록에서 값을 선택하는 컴포넌트입니다.

Lynx Engine 최소 버전: 3.9
사용 XElement: <overlay>

사용 가능 버전: @seed-design/lynx-react@0.8.0, @seed-design/lynx-css@0.12.0

## Preview

```tsx
import "./styles";

import { Box, VStack, useSeedClassName } from "@seed-design/lynx-react";
import {
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectRoot,
  SelectTrigger,
} from "@/components/ui/select";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-select-root`}>
      <VStack className="select-preview">
        <Box width="240px">
          <SelectRoot defaultValue={["apple"]}>
            <SelectTrigger accessibility-label="과일" placeholder="과일을 선택하세요" />
            <SelectContent>
              <SelectGroup>
                <SelectItem value="apple" label="사과" />
                <SelectItem value="banana" label="바나나" />
                <SelectItem value="cherry" label="체리" />
              </SelectGroup>
            </SelectContent>
          </SelectRoot>
        </Box>
      </VStack>
    </view>
  );
}
```

## Installation

- npm: npx @seed-design/cli@latest add ui:select
- pnpm: pnpm dlx @seed-design/cli@latest add ui:select
- yarn: yarn dlx @seed-design/cli@latest add ui:select
- bun: bun x @seed-design/cli@latest add ui:select

## Usage

`SelectContent`는 native overlay, 위치 계산, 표시 수명과 긴 목록의 scroll viewport를 함께 소유합니다.

```tsx
import {
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectRoot,
  SelectTrigger,
} from "@/components/ui/select";

export function App() {
  return (
    <view style={{ width: "240px" }}>
      <SelectRoot defaultValue={["apple"]}>
        <SelectTrigger accessibility-label="과일" placeholder="과일을 선택하세요" />
        <SelectContent>
          <SelectGroup>
            <SelectItem value="apple" label="사과" />
            <SelectItem value="banana" label="바나나" />
            <SelectItem value="cherry" label="체리" />
          </SelectGroup>
        </SelectContent>
      </SelectRoot>
    </view>
  );
}
```

- `SelectRoot`는 `value`/`defaultValue`와 `open`/`defaultOpen`을 관리합니다. `multiple`일 때는 항목을 탭해도 목록을 유지하고 선택을 toggle합니다.
- `SelectTrigger`는 선택 값 또는 placeholder를 표시하고 탭으로 목록을 열고 닫습니다. `SelectRoot`의 문자열 `label` 또는 `accessibility-label`은 trigger의 기본 접근성 이름으로 사용됩니다.
- `SelectContent`는 선택된 항목이 보이도록 목록을 스크롤하고, trigger 너비·화면 여유 공간·safe area에 맞춰 목록을 배치합니다.
- `SelectGroup`은 관련 항목을 묶습니다. 여러 그룹 사이에는 구분선이 표시되고 `label`은 그룹 제목을 만듭니다.
- `SelectItem`은 label, 선택적 description, prefix icon과 기본 checkmark indicator를 조합합니다. `selectedIndicator`로 checkmark를 교체할 수 있습니다.

낮은 수준의 조합이 필요하면 `Select` namespace의 `Root`, `Trigger`, `Value`, `Placeholder`, `PrefixIcon`, `SuffixIcon`, `Content`, `ScrollArea`, `Group`, `GroupLabel`, `Item`, `ItemPrefixIcon`, `ItemBody`, `ItemLabel`, `ItemDescription`, `ItemIndicator`를 사용하세요. 같은 API는 `SelectRoot`, `SelectTrigger`처럼 `Select` 접두어가 붙은 flat export로도 제공합니다.

## Props

### `SelectRoot`

### `SelectTrigger`

### `SelectContent`

### `SelectGroup`

### `SelectItem`

## Examples

### Size

`size`로 trigger와 목록의 크기를 정합니다. 기본값은 `large`이고, `responsive`는 native runtime의 화면 폭이 1280 이상이면 `medium`, 그 외에는 `large`로 해석합니다.

```tsx
import "./styles";

import { Box, VStack, useSeedClassName } from "@seed-design/lynx-react";
import {
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectRoot,
  SelectTrigger,
} from "@/components/ui/select";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  return (
    <view className={`${seedClassName} docs-lynx-select-root`}>
      <VStack className="select-preview" gap="x4">
        <Box width="240px">
          <SelectRoot size="large" defaultValue={["apple"]}>
            <SelectTrigger accessibility-label="과일 (large)" placeholder="과일 선택" />
            <SelectContent>
              <SelectGroup>
                <SelectItem value="apple" label="사과" />
                <SelectItem value="banana" label="바나나" />
              </SelectGroup>
            </SelectContent>
          </SelectRoot>
        </Box>
        <Box width="240px">
          <SelectRoot size="medium" defaultValue={["apple"]}>
            <SelectTrigger accessibility-label="과일 (medium)" placeholder="과일 선택" />
            <SelectContent>
              <SelectGroup>
                <SelectItem value="apple" label="사과" />
                <SelectItem value="banana" label="바나나" />
              </SelectGroup>
            </SelectContent>
          </SelectRoot>
        </Box>
      </VStack>
    </view>
  );
}
```

### Groups

`SelectGroup`으로 옵션을 묶고 `label`로 그룹 제목을 표시합니다. 두 번째 그룹부터는 그룹 사이에 구분선이 추가됩니다.

```tsx
import "./styles";

import { Box, VStack, useSeedClassName } from "@seed-design/lynx-react";
import {
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectRoot,
  SelectTrigger,
} from "@/components/ui/select";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  return (
    <view className={`${seedClassName} docs-lynx-select-root`}>
      <VStack className="select-preview">
        <Box width="240px">
          <SelectRoot defaultValue={["seoul"]}>
            <SelectTrigger accessibility-label="지역" placeholder="지역 선택" />
            <SelectContent>
              <SelectGroup label="아시아">
                <SelectItem value="seoul" label="서울" />
                <SelectItem value="tokyo" label="도쿄" />
                <SelectItem value="singapore" label="싱가포르" />
                <SelectItem value="dubai" label="두바이" />
              </SelectGroup>
              <SelectGroup label="유럽">
                <SelectItem value="london" label="런던" />
                <SelectItem value="paris" label="파리" />
                <SelectItem value="berlin" label="베를린" />
              </SelectGroup>
              <SelectGroup label="아메리카">
                <SelectItem value="new-york" label="뉴욕" />
                <SelectItem value="sao-paulo" label="상파울루" />
              </SelectGroup>
            </SelectContent>
          </SelectRoot>
        </Box>
      </VStack>
    </view>
  );
}
```

### Multiple Selection

`multiple`을 지정하면 선택한 옵션을 다시 탭해 해제할 수 있습니다. 다중 선택 중에는 목록이 닫히지 않으며 trigger에는 기본적으로 선택된 `textValue`가 `", "`로 연결되어 표시됩니다.

```tsx
import "./styles";

import { Box, VStack, useSeedClassName } from "@seed-design/lynx-react";
import {
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectRoot,
  SelectTrigger,
} from "@/components/ui/select";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  return (
    <view className={`${seedClassName} docs-lynx-select-root`}>
      <VStack className="select-preview">
        <Box width="240px">
          <SelectRoot multiple defaultValue={["apple", "cherry"]}>
            <SelectTrigger accessibility-label="과일" placeholder="과일 선택" />
            <SelectContent>
              <SelectGroup>
                <SelectItem value="apple" label="사과" />
                <SelectItem value="banana" label="바나나" />
                <SelectItem value="cherry" label="체리" />
                <SelectItem value="grape" label="포도" />
              </SelectGroup>
            </SelectContent>
          </SelectRoot>
        </Box>
      </VStack>
    </view>
  );
}
```

### With Description

`SelectItem`의 `description`으로 옵션에 부가 설명을 추가합니다.

```tsx
import "./styles";

import { Box, VStack, useSeedClassName } from "@seed-design/lynx-react";
import {
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectRoot,
  SelectTrigger,
} from "@/components/ui/select";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  return (
    <view className={`${seedClassName} docs-lynx-select-root`}>
      <VStack className="select-preview">
        <Box width="280px">
          <SelectRoot defaultValue={["standard"]}>
            <SelectTrigger accessibility-label="배송 방법" placeholder="배송 방법 선택" />
            <SelectContent>
              <SelectGroup>
                <SelectItem value="standard" label="일반 배송" description="3-5일 소요" />
                <SelectItem value="express" label="빠른 배송" description="1-2일 소요" />
                <SelectItem value="same-day" label="당일 배송" description="오늘 도착" />
              </SelectGroup>
            </SelectContent>
          </SelectRoot>
        </Box>
      </VStack>
    </view>
  );
}
```

### With Prefix Icon

`SelectItem`의 `prefixIcon`으로 옵션 앞에 아이콘을 표시합니다. 단일 옵션이 선택되면 해당 아이콘이 trigger prefix에 표시됩니다. 선택이 없거나 여러 옵션이 선택된 경우에는 `SelectTrigger`의 `prefixIcon` fallback을 사용합니다.

```tsx
import "./styles";

import IconGlobeLine from "@karrotmarket/lynx-monochrome-icon/IconGlobeLine";
import IconLockLine from "@karrotmarket/lynx-monochrome-icon/IconLockLine";
import IconPerson2Line from "@karrotmarket/lynx-monochrome-icon/IconPerson2Line";
import IconPersonLine from "@karrotmarket/lynx-monochrome-icon/IconPersonLine";
import { Box, VStack, useSeedClassName } from "@seed-design/lynx-react";
import {
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectRoot,
  SelectTrigger,
} from "@/components/ui/select";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  return (
    <view className={`${seedClassName} docs-lynx-select-root`}>
      <VStack className="select-preview">
        <Box width="280px">
          <SelectRoot>
            <SelectTrigger
              accessibility-label="공유 대상"
              placeholder="공유 대상"
              prefixIcon={<IconPerson2Line />}
            />
            <SelectContent>
              <SelectGroup label="그룹">
                <SelectItem value="public" label="전체 공개" prefixIcon={<IconGlobeLine />} />
                <SelectItem value="followers" label="팔로워만" prefixIcon={<IconLockLine />} />
                <SelectItem value="private" label="나만" prefixIcon={<IconPersonLine />} />
              </SelectGroup>
              <SelectGroup label="사람">
                <SelectItem value="kim" label="김하늘" />
                <SelectItem value="lee" label="이하늘" />
              </SelectGroup>
            </SelectContent>
          </SelectRoot>
        </Box>
      </VStack>
    </view>
  );
}
```

### Custom Item Label

`label`에는 복합 JSX를 전달할 수 있습니다. 복합 label을 사용할 때는 trigger에 표시할 문자열과 옵션 접근성 이름을 위해 `textValue`를 함께 지정하세요.

```tsx
import "./styles";

import IconCarLine from "@karrotmarket/lynx-monochrome-icon/IconCarLine";
import IconFigureBikeLine from "@karrotmarket/lynx-monochrome-icon/IconFigureBikeLine";
import IconMetroFrontsideLine from "@karrotmarket/lynx-monochrome-icon/IconMetroFrontsideLine";
import { Badge, Box, HStack, VStack, useSeedClassName } from "@seed-design/lynx-react";
import {
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectRoot,
  SelectTrigger,
} from "@/components/ui/select";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  return (
    <view className={`${seedClassName} docs-lynx-select-root`}>
      <VStack className="select-preview">
        <Box width="280px">
          <SelectRoot defaultValue={["metro"]}>
            <SelectTrigger accessibility-label="이동 수단" placeholder="이동 수단 선택" />
            <SelectContent>
              <SelectGroup>
                <SelectItem value="bike" label="자전거" prefixIcon={<IconFigureBikeLine />} />
                <SelectItem
                  value="metro"
                  textValue="지하철"
                  prefixIcon={<IconMetroFrontsideLine />}
                  label={
                    <HStack align="center" gap="x1_5">
                      <text>지하철</text>
                      <Badge variant="weak" tone="informative">
                        가장 빠름
                      </Badge>
                    </HStack>
                  }
                />
                <SelectItem
                  value="car"
                  textValue="자동차"
                  disabled
                  prefixIcon={<IconCarLine />}
                  label={
                    <HStack align="center" gap="x1_5">
                      <text>자동차</text>
                      <Badge variant="weak" tone="warning">
                        고객지원에 문의
                      </Badge>
                    </HStack>
                  }
                />
              </SelectGroup>
            </SelectContent>
          </SelectRoot>
        </Box>
      </VStack>
    </view>
  );
}
```

### Disabled

`SelectItem`의 `disabled`는 특정 옵션을, `SelectRoot`의 `disabled`는 Select 전체를 비활성화합니다. `readOnly`도 목록을 열거나 선택을 바꾸지 않습니다.

```tsx
import "./styles";

import { Box, VStack, useSeedClassName } from "@seed-design/lynx-react";
import {
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectRoot,
  SelectTrigger,
} from "@/components/ui/select";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  return (
    <view className={`${seedClassName} docs-lynx-select-root`}>
      <VStack className="select-preview" gap="x4">
        <Box width="240px">
          <SelectRoot defaultValue={["apple"]}>
            <SelectTrigger accessibility-label="과일" placeholder="과일 선택" />
            <SelectContent>
              <SelectGroup>
                <SelectItem value="apple" label="사과" />
                <SelectItem value="banana" label="바나나" disabled />
                <SelectItem value="cherry" label="체리" />
              </SelectGroup>
            </SelectContent>
          </SelectRoot>
        </Box>
        <Box width="240px">
          <SelectRoot disabled defaultValue={["apple"]}>
            <SelectTrigger accessibility-label="비활성 과일" placeholder="과일 선택" />
            <SelectContent>
              <SelectGroup>
                <SelectItem value="apple" label="사과" />
                <SelectItem value="banana" label="바나나" />
              </SelectGroup>
            </SelectContent>
          </SelectRoot>
        </Box>
      </VStack>
    </view>
  );
}
```

### Long List

목록은 상하 8px 패딩을 포함한 내용 높이만큼 표시하며, 별도의 최소 높이는 없습니다. 최대 높이는 480px이고 trigger 주위의 남은 공간과 safe area에 맞춰 제한합니다. 내용이 이 높이를 넘을 때만 스크롤됩니다.

열릴 때 선택된 옵션이 화면 밖에 있으면 보이는 데 필요한 만큼만 스크롤합니다. 이미 보이는 옵션을 선택하거나 목록이 닫히는 중에는 스크롤 위치를 바꾸지 않습니다.

```tsx
import "./styles";

import { Box, VStack, useSeedClassName } from "@seed-design/lynx-react";
import {
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectRoot,
  SelectTrigger,
} from "@/components/ui/select";

const timeSlots = Array.from({ length: 48 }, (_, index) => {
  const hour = String(Math.floor(index / 2)).padStart(2, "0");
  return `${hour}:${index % 2 === 0 ? "00" : "30"}`;
});

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  return (
    <view className={`${seedClassName} docs-lynx-select-root`}>
      <VStack className="select-preview">
        <Box width="240px">
          <SelectRoot defaultValue={["14:00"]}>
            <SelectTrigger accessibility-label="예약 시간" placeholder="시간 선택" />
            <SelectContent>
              <SelectGroup>
                {timeSlots.map((slot) => (
                  <SelectItem key={slot} value={slot} label={slot} />
                ))}
              </SelectGroup>
            </SelectContent>
          </SelectRoot>
        </Box>
      </VStack>
    </view>
  );
}
```

### Placement

`placement`로 목록 위치를 정합니다. 기본값은 `bottom`이며, 공간이 부족하면 native positioner가 반대쪽으로 뒤집거나 경계 안으로 이동합니다.

```tsx
import "./styles";

import { Box, VStack, useSeedClassName } from "@seed-design/lynx-react";
import {
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectRoot,
  SelectTrigger,
} from "@/components/ui/select";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  return (
    <view className={`${seedClassName} docs-lynx-select-root`}>
      <VStack className="select-preview">
        <Box width="240px">
          <SelectRoot placement="top" defaultValue={["apple"]}>
            <SelectTrigger accessibility-label="과일" placeholder="과일 선택" />
            <SelectContent>
              <SelectGroup>
                <SelectItem value="apple" label="사과" />
                <SelectItem value="banana" label="바나나" />
                <SelectItem value="cherry" label="체리" />
              </SelectGroup>
            </SelectContent>
          </SelectRoot>
        </Box>
      </VStack>
    </view>
  );
}
```

### Listening to Value Changes

`value`와 `onValueChange`로 선택 값을 제어할 수 있습니다.

```tsx
import "./styles";

import { useState } from "@lynx-js/react";
import { Box, VStack, useSeedClassName } from "@seed-design/lynx-react";
import {
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectRoot,
  SelectTrigger,
} from "@/components/ui/select";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const [value, setValue] = useState<string[]>(["apple"]);
  return (
    <view className={`${seedClassName} docs-lynx-select-root`}>
      <VStack className="select-preview" gap="x2">
        <Box width="240px">
          <SelectRoot value={value} onValueChange={setValue}>
            <SelectTrigger accessibility-label="과일" placeholder="과일 선택" />
            <SelectContent>
              <SelectGroup>
                <SelectItem value="apple" label="사과" />
                <SelectItem value="banana" label="바나나" />
                <SelectItem value="cherry" label="체리" />
              </SelectGroup>
            </SelectContent>
          </SelectRoot>
        </Box>
        <text className="select-preview__status">
          선택된 값: {value.length > 0 ? value.join(", ") : "없음"}
        </text>
      </VStack>
    </view>
  );
}
```

### Controlled Open State

`open`과 `onOpenChange`로 목록 상태를 제어합니다. 초기 상태만 지정하려면 `defaultOpen`을 사용하세요.

```tsx
import "./styles";

import { useState } from "@lynx-js/react";
import { ActionButton, Box, VStack, useSeedClassName } from "@seed-design/lynx-react";
import {
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectRoot,
  SelectTrigger,
} from "@/components/ui/select";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const [open, setOpen] = useState(false);
  return (
    <view className={`${seedClassName} docs-lynx-select-root`}>
      <VStack className="select-preview" gap="x2">
        <Box width="240px">
          <SelectRoot open={open} onOpenChange={setOpen} defaultValue={["apple"]}>
            <SelectTrigger accessibility-label="과일" placeholder="과일 선택" />
            <SelectContent>
              <SelectGroup>
                <SelectItem value="apple" label="사과" />
                <SelectItem value="banana" label="바나나" />
                <SelectItem value="cherry" label="체리" />
              </SelectGroup>
            </SelectContent>
          </SelectRoot>
        </Box>
        <ActionButton variant="neutralWeak" disabled={open} bindtap={() => setOpen(true)}>
          목록 열기
        </ActionButton>
        <text className="select-preview__status">목록 상태: {open ? "열림" : "닫힘"}</text>
      </VStack>
    </view>
  );
}
```

### `onOpenChange` Details

`onOpenChange`의 두 번째 인자는 상태를 바꾼 이유를 제공합니다. 열림 이유는 `trigger`이고, 닫힘 이유는 `trigger`, `itemSelect`, `interactOutside`, `dismiss`입니다.

```tsx
import "./styles";

import { useState } from "@lynx-js/react";
import { Box, HStack, VStack, useSeedClassName } from "@seed-design/lynx-react";
import {
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectRoot,
  SelectTrigger,
} from "@/components/ui/select";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const [open, setOpen] = useState(false);
  const [openReason, setOpenReason] = useState<string | null>(null);
  const [closeReason, setCloseReason] = useState<string | null>(null);
  function handleOpenChange(nextOpen: boolean, details: { reason: string }) {
    "background only";
    setOpen(nextOpen);
    (nextOpen ? setOpenReason : setCloseReason)(details.reason);
  }
  return (
    <view className={`${seedClassName} docs-lynx-select-root`}>
      <VStack className="select-preview" gap="x4">
        <Box width="240px">
          <SelectRoot open={open} onOpenChange={handleOpenChange} defaultValue={["apple"]}>
            <SelectTrigger accessibility-label="과일" placeholder="과일 선택" />
            <SelectContent>
              <SelectGroup>
                <SelectItem value="apple" label="사과" />
                <SelectItem value="banana" label="바나나" />
                <SelectItem value="cherry" label="체리" />
              </SelectGroup>
            </SelectContent>
          </SelectRoot>
        </Box>
        <HStack gap="x4">
          <text className="select-preview__status">마지막 열림 이유: {openReason ?? "-"}</text>
          <text className="select-preview__status">마지막 닫힘 이유: {closeReason ?? "-"}</text>
        </HStack>
      </VStack>
    </view>
  );
}
```

### Custom Value Format

`formatValue`로 trigger에 표시할 선택 값을 바꿉니다. callback은 `value`, `label`, `textValue`, `prefixIcon`을 담은 선택 item 배열을 받습니다.

```tsx
import "./styles";

import { Box, HStack, VStack, useSeedClassName } from "@seed-design/lynx-react";
import {
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectRoot,
  SelectTrigger,
} from "@/components/ui/select";

const listFormat = new Intl.ListFormat("ko", { type: "conjunction" });

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-select-root`}>
      <VStack className="select-preview">
        <HStack width="full" gap="x4">
          <Box style={{ flex: 1 }}>
            <SelectRoot
              multiple
              defaultValue={["apple", "banana"]}
              formatValue={(items) => listFormat.format(items.map((item) => item.textValue))}
            >
              <SelectTrigger accessibility-label="과일" placeholder="과일 선택" />
              <SelectContent>
                <SelectGroup>
                  <SelectItem value="apple" label="사과" />
                  <SelectItem value="banana" label="바나나" />
                  <SelectItem value="cherry" label="체리" />
                </SelectGroup>
              </SelectContent>
            </SelectRoot>
          </Box>
          <Box style={{ flex: 1 }}>
            <SelectRoot
              multiple
              defaultValue={["apple", "banana", "cherry"]}
              formatValue={([first, ...rest]) =>
                rest.length > 0 ? `${first?.textValue ?? ""} 외 ${rest.length}개` : first?.textValue
              }
            >
              <SelectTrigger accessibility-label="과일" placeholder="과일 선택" />
              <SelectContent>
                <SelectGroup>
                  <SelectItem value="apple" label="사과" />
                  <SelectItem value="banana" label="바나나" />
                  <SelectItem value="cherry" label="체리" />
                </SelectGroup>
              </SelectContent>
            </SelectRoot>
          </Box>
        </HStack>
      </VStack>
    </view>
  );
}
```

### Field Integration

`SelectRoot`는 기존 Lynx `Field`를 조합하므로 `label`, `description`, `errorMessage`, `invalid`, `required`와 `showRequiredIndicator`를 지원합니다. 오류 메시지가 있으면 description 대신 오류 메시지를 표시합니다.

```tsx
import "./styles";

import { Box, VStack, useSeedClassName } from "@seed-design/lynx-react";
import {
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectRoot,
  SelectTrigger,
} from "@/components/ui/select";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-select-root`}>
      <VStack className="select-preview" gap="x6">
        <Box width="240px">
          <SelectRoot
            label="과일"
            description="가장 좋아하는 과일을 선택하세요."
            defaultValue={["apple"]}
          >
            <SelectTrigger placeholder="과일 선택" />
            <SelectContent>
              <SelectGroup>
                <SelectItem value="apple" label="사과" />
                <SelectItem value="banana" label="바나나" />
                <SelectItem value="cherry" label="체리" />
              </SelectGroup>
            </SelectContent>
          </SelectRoot>
        </Box>
        <Box width="240px">
          <SelectRoot label="과일" labelWeight="bold" invalid errorMessage="과일을 선택해주세요.">
            <SelectTrigger placeholder="과일 선택" />
            <SelectContent>
              <SelectGroup>
                <SelectItem value="apple" label="사과" />
                <SelectItem value="banana" label="바나나" />
                <SelectItem value="cherry" label="체리" />
              </SelectGroup>
            </SelectContent>
          </SelectRoot>
        </Box>
      </VStack>
    </view>
  );
}
```

### Form Integration

Lynx에는 HTML `<form>`과 native `<select>` 제출 모델이 없습니다. 선택 값은 `onValueChange`로 앱 state에 저장하고, 제출 action의 payload에 그 값을 넣으세요.

### React Hook Form

현재 Lynx React 런타임과 이 예제 경로에는 React Hook Form 통합·dependency가 없습니다. `value`/`onValueChange`와 `invalid`/`errorMessage`를 앱 상태 및 native request action에 직접 연결하세요.

## 웹 버전과의 차이

<Callout type="warning">
  Lynx Select는 native overlay 위에 렌더링됩니다. HTML DOM의 focus와 form 모델 대신 native tap, overlay dismissal, accessibility-\* 속성과 앱 상태를 사용합니다.
</Callout>

| 항목         | React                        | Lynx                                                                           |
| ---------- | ---------------------------- | ------------------------------------------------------------------------------ |
| Trigger 조합 | `asChild`와 DOM button 조합     | native `SelectTrigger`를 사용                                                     |
| 위치와 긴 목록   | DOM positioner와 scroll area  | `SelectContent`가 native overlay, 위치 계산, scroll viewport를 함께 소유                 |
| 열림 이유      | keyboard/focus를 포함한 DOM 상호작용 | `trigger`, `itemSelect`, `interactOutside`, `dismiss`                          |
| 키보드        | focus, typeahead, Escape로 닫기 | 현재 Lynx Select에서 지원하지 않음                                                       |
| 접근성        | DOM ARIA id 연결               | `SelectRoot` 또는 `SelectTrigger`의 `accessibility-label`과 item의 native 접근성 속성 사용 |
| 반응형 size   | 웹 viewport 기반                | native runtime 폭을 사용                                                           |

## Lynx 미지원 기능

| 기능                                        | 웹 대응                                | 앱 대안                                                                                           |
| ----------------------------------------- | ----------------------------------- | ---------------------------------------------------------------------------------------------- |
| hidden native select, `name`, `form` 제출   | `<select>`와 `FormData`              | `onValueChange`로 앱 state를 갱신하고 제출 action payload에 그 값을 넣기                                      |
| browser validation                        | `required`의 native form validation  | 앱 제출 action에서 state를 검증하고 `invalid`/`errorMessage`를 제어하기                                       |
| React Hook Form 예제                        | `useController`와 HTML form 통합       | 현재 예제 경로에는 React Hook Form 통합·dependency가 없으므로 `value`/`onValueChange` 및 앱 상태·요청 action으로 연결하기 |
| DOM focus, typeahead, keyboard navigation | focus/keyboard API                  | native tap과 host의 접근성 탐색 흐름 사용                                                                 |
| DOM ARIA id                               | `aria-describedby`, `aria-controls` | 각 trigger와 복합 item에 필요한 `accessibility-*` 속성을 직접 지정                                            |