Field.Select

Field.Select는 Field 안의 네이티브 <select>입니다. JavaScript listbox가 아닙니다.

브라우저가 appearance: base-select를 지원하면 버튼과 선택 창을 field, option 토큰으로 그립니다. 그 밖의 브라우저에서는 같은 값과 같은 키보드로 브라우저 자체 선택 창이 나타납니다. 자식은 <option> 또는 <optgroup> 요소입니다. 다른 필드처럼 Label.Root htmlFor로 select의 이름을 붙입니다.

const id = useId();

<Field.Group>
  <Label.Root htmlFor={id}>Size</Label.Root>
  <Field.Root id={id}>
    <Field.Select value={size} onChange={(event) => setSize(event.target.value)}>
      <option value="s">Small</option>
      <option value="m">Medium</option>
    </Field.Select>
  </Field.Root>
</Field.Group>

아이콘

Field.Select는 브라우저가 ::picker-icon을 지원하고 select가 필드의 마지막 파트일 때 GlyphsProvider의 chevron 글리프를 브라우저의 선택기 아이콘 위에 그립니다. 그렇지 않거나 provider가 없으면 브라우저의 아이콘이 보입니다. 선택된 <option> 옆의 체크 표시는 브라우저 자체의 것입니다.

import { ChevronDown } from 'lucide-react';

<GlyphsProvider glyphs={{ chevron: <ChevronDown /> }}>
  <Field.Root aria-label="Plan">
    <Field.Select value={plan} onValueChange={setPlan}>
      …
    </Field.Select>
  </Field.Root>
</GlyphsProvider>

접근성을 지키는 조합

Todae가 맡는 것: select는 Field.Root에서 id, name, aria-label, aria-labelledby, aria-describedby를 받고, Root나 바깥 Fieldset에서 네이티브 disabled와 aria-invalid를 받습니다. 필드의 다른 곳을 마우스로 누르면 select에 포커스가 가고, 브라우저가 허용하면 선택 창이 열립니다. chevron 글리프는 aria-hidden입니다. 키보드와 선택 창은 브라우저가 처리합니다.

직접 제공할 것: 이름. htmlFor가 Root id인 Label이나, Root의 aria-label / aria-labelledby입니다. onChange나 onValueChange도 주세요. 둘 다 없으면 select는 읽기 전용입니다.

주의할 점: multiple과 size는 Field.Select의 props가 아닙니다. 여러 값에는 Checkbox나 Field.ChipInput을 쓰세요.

언제 쓰나요

Field.Select

언제: 폼 안에서 짧고 고정된 목록 중 값 하나를 고를 때. 컨트롤은 JavaScript listbox가 아니라 네이티브 <select>와 그 키보드입니다.

쓰지 않을 때: 긴 목록을 필터링하거나 검색 → Combobox 레시피. 여러 값 → Checkbox 또는 Field.ChipInput. 값이 아닌 명령 → Menu.

Props