Select

구조는 당근 SEED Select(Apache-2.0)를 따른다 — 트리거(Trigger) · 목록(Content) · 선택지(Item) · 묶음(Group) · 묶음 사이 선(Divider). 라벨 · 설명 · 오류는 Field가 둘레에서 그린다. 값은 groo 토큰이고, SEED 와 다른 자리는 맨 아래 "SEED 와 다른 점" 에 적었다(2026-10-01 사용자 결정).

수치 원본은 select.yaml이다. 수치 표 자리([표: …])와 그림 자리([그림: …])는 사이트가 그 파일로 그린다 — GitHub 에서는 그 파일 · 그림 코드로 가는 링크로 보인다.

직접 골라 보기제목 링크 복사

크기 · 상태 · 여럿 고르기 · 앞 아이콘 · 묶음 · 설명을 고르면 스펙대로 그린 칸과 그 코드가 바뀐다. 실제로 열고 고를 수 있다.

import { Field } from "@/components/ui/field"
import { Select, SelectGroup, SelectItem } from "@/components/ui/select"

<Field label="결제 수단">
  <Select placeholder="결제 수단 선택" value={asset} onValueChange={setAsset}>
    <SelectGroup>
      <SelectItem value="none" label="결제 수단 없음" />
    </SelectGroup>
    <SelectGroup label="카드">
      <SelectItem value="kb-check" label="국민 체크카드" />
      <SelectItem value="hyundai-m" label="현대카드 M" />
      <SelectItem value="shinhan" label="신한카드 Deep" />
    </SelectGroup>
    <SelectGroup label="계좌 · 현금">
      <SelectItem value="toss" label="토스뱅크 통장" />
      <SelectItem value="kakao" label="카카오뱅크 통장" />
      <SelectItem value="cash" label="현금" />
    </SelectGroup>
  </Select>
</Field>

Anatomy제목 링크 복사

부위

Properties제목 링크 복사

Size제목 링크 복사

large(트리거 52 · 선택지 46)는 폰 · 앱에서, medium(트리거 40 · 선택지 39)은 1280 이상 데스크톱 웹(마우스)에서만 쓴다. 웹의 기본은 responsive 다 — 1280 미만은 large, 이상은 medium(SEED lg). 앱은 늘 large 다. 예외 하나 — Table Pagination 의 두 고르기는 줄 한 높이를 지키려고 폭과 상관없이 medium 40 이다(사용자 결정 2026-10-08). 트리거와 목록은 같은 크기를 쓰고, 한 폼 안에서 크기를 섞지 않는다.

크기 — 트리거

크기 — 선택지

크기 — 묶음 제목

State제목 링크 복사

트리거의 상태는 Input Button 과 같고, 목록이 열려 있는 동안 셰브론이 180° 돈다.

트리거 상태

트리거 글자 · 아이콘

포커스 링

선택지 상태

알약 — 모양

알약

선택지 글자 · 아이콘 · 고른 표시

모션

Selection Mode제목 링크 복사

하나 고르기가 기본이다. 여럿 고르기(multiple)도 둔다.

• 하나 고르기 — 고르면 목록이 닫히고 값이 트리거에 들어간다. 고른 선택지를 다시 눌러도 풀리지 않는다 — "없음" 이 답이 될 수 있는 칸은 그 답을 선택지로 둔다(아래 "없음" 을 답으로 받기).
• 여럿 고르기 — 목록이 열린 채로 남아 이어서 고른다. 고른 선택지를 다시 누르면 풀린다. 트리거에는 고른 순서대로 쉼표로 잇고("식비, 교통"), 칸 폭을 넘으면 "첫 값 외 N개" 로 줄인다.

Prefix Icon제목 링크 복사

트리거와 선택지 앞에 아이콘을 둘 수 있다. 트리거의 아이콘은 어떤 종류의 값을 고르는 자리인지 함께 알리고 싶을 때 쓴다. 트리거에 실제로 그리는 아이콘은 고른 개수로 정한다(SEED).

• 하나를 골랐다 — 그 선택지의 아이콘을 그린다(트리거에 준 아이콘을 덮는다). 선택지에 아이콘이 없으면 트리거의 아이콘.
• 둘 이상 골랐다(여럿 고르기) — 트리거의 아이콘.
• 그릴 아이콘이 없으면 아이콘 없이 그린다.

선택지 아이콘은 묶음 안에서 모두 두거나 모두 빼고, 아이콘만으로 뜻을 알리지 않는다.

Content제목 링크 복사

목록은 트리거 폭 그대로, 트리거 아래 8 에 붙는다. 아래가 모자라면 위로 뒤집고, 화면 가장자리와는 8 을 둔다(안전 영역이 있으면 그 값). 높이는 480 과 목록이 놓이는 쪽에 남은 화면 중 작은 값이고(남은 화면이 200 보다 좁아도 200 은 둔다), 넘치면 목록 안에서 스크롤한다. 놓이는 쪽은 아래에 다 들어가면 아래, 아니면 트리거 아래 · 위 중 넓은 쪽이고, 남은 화면은 트리거에서 그쪽 화면 가장자리 8(안전 영역이 있으면 그 값)까지다. 열면 초점이 목록으로 가 화면 키보드는 내려간다 — 남은 화면에 키보드를 세지 않는다(구현 세션 질문 Q-008-1 — SEED "가용 높이" 와 같은 뜻). 480 은 listMaxHeight 로 줄일 수 있다 — Table Pagination 의 범위 목록만 240(SEED)을 쓴다. 열면 고른 선택지가 보이게 스크롤된 채로 열린다 — 선택지가 많은 Select 는 목록 안에서 스크롤되는 모습을 가정하고 짠다.

선택지 글은 목록 안에서는 줄바꿈되고(자르지 않는다), 트리거에서는 한 줄로 말줄임된다.

목록

Group제목 링크 복사

성격이나 정렬 기준이 다른 선택지는 묶음으로 나눈다. 묶음에는 제목을 붙일 수 있고(fg-neutral-subtle), 묶음이 둘 이상이면 사이에 1px 선(좌우 16 들임)을 저절로 그린다 — 묶음 사이는 8 + 1 + 8 = 17 이다. 선택지 사이에는 선을 긋지 않는다.

선택지

묶음 제목

묶음 사이 선

Guidelines제목 링크 복사

늘 Field 의 라벨과 함께제목 링크 복사

Select 는 늘 Field 의 라벨과 함께 쓴다. 라벨이 없으면 고른 뒤에 그 값이 무엇인지 알 수 없다 — placeholder 는 고르면 사라지므로 라벨을 대신하지 못한다.

"없음" 을 답으로 받기제목 링크 복사

하나 고르기는 고른 선택지를 다시 눌러도 풀리지 않는다. 칸의 성격에 따라 셋으로 나눈다(SEED).

"없음" 을 고르면 값을 고른 것으로 친다 — 트리거에 그 글을 보이고, 필수 칸이어도 검증을 통과한다. 그래서 질문을 건너뛴 것과 없다고 답한 것을 가를 수 있다. 저장된 기록을 수정으로 열 때 그 칸의 값이 비어 있으면(null) 트리거에 "{칸 이름} 없음" 을 보인다 — 저장한 기록의 빈 값은 "없다고 답한 것" 이다. 자리 글(placeholder)은 아직 아무것도 묻지 않은 새로 추가할 때만 보인다(2026-10-29 17-1 — 이 구분 규칙의 풀이). Select 에는 지우기 버튼을 두지 않는다(선택 사항인 Input Button 에만).

여럿 고르기제목 링크 복사

여럿 고르기는 다시 누르면 풀리므로 고른 것을 되돌리는 선택지가 따로 필요 없다. 대신 생김새로는 드러나지 않는 제약을 글로 알린다.

• 몇 개까지 고를 수 있는지 — Field 설명에 적는다("최대 3개까지 고를 수 있어요.").
• 꼭 골라야 하면 — 필수 표시를 하고, 하나도 고르지 않고 제출하면 Field 의 오류로 알린다.
• 다른 선택지를 바꾸는 선택지를 두지 않는다 — "전체 선택" 이나 나머지를 지우는 "없음" 은 결과를 짐작하기 어렵다. 전체 선택이 잦으면 Checkbox 의 부모 · 자식 묶음을 쓴다. 건너뛴 것과 없다고 답한 것을 갈라야 하면 앞에 Checkbox 를 두고("하자 있음"), 체크했을 때만 Select("하자 종류")를 보인다.

여럿 고른 값 보이기제목 링크 복사

트리거는 한 줄이다. 다 보이면 고른 순서대로 쉼표로 잇고("식비, 교통"), 칸 폭을 넘으면 개수로 줄인다 — 가장 먼저 고른 값을 남기고 나머지 개수를 붙인다("식비 외 2개"). "외" 는 앞의 값을 뺀 개수다 — "식비 등 2개" 라고 쓰면 모두 두 개라는 뜻이 되어 틀린다. 값이 서로 동등해 하나를 보여 주는 것이 도움이 안 되면 전체 개수로 쓴다("3개 고름").

고른 값이 조건으로 묶여 결과가 달라지는 자리(필터)는 쉼표 대신 접속사로 관계를 드러내고("식비 또는 교통"), 어떻게 묶이는지를 Field 설명에도 적는다.

선택지 순서제목 링크 복사

사용 빈도 · 크기 · 시간처럼 그 목록이 이미 가진 기준 하나로 일관되게 줄 세운다(가나다순을 기본으로 두지 않는다). 기준이 다른 선택지는 묶음으로 나눠 경계를 드러낸다.

선택지 글제목 링크 복사

• 명사형으로 짧게 — "서울 선택" 처럼 동작이나 부연을 붙이지 않는다. 선택지 사이에 낱말 · 길이 · 말투를 맞춘다.
• 코드값(Y · N · ANNUAL · 아이디)을 글로 내지 않는다(Writing).
• 트리거 폭에서 말줄임 없이 보이는지 확인한다 — 목록에서는 줄바꿈되어 다 보여도 트리거에서는 잘린다. 길면 글을 줄이는 것을 먼저 하고, 부연은 선택지 설명(한 줄)에 쓴다. 설명은 트리거에 보이지 않는다.

placeholder제목 링크 복사

고르기 전의 글은 어떤 종류의 값을 고르는지 알리는 "{값의 종류} 선택" 꼴이다("결제 수단 선택"). "여기를 눌러 펼쳐 보기" 같은 막연한 글이나 라벨만 그대로 둔 글은 쓰지 않는다. 마침표는 찍지 않는다.

폰에서도 칸 아래 목록제목 링크 복사

폰에서도 목록은 칸 아래에 붙는다 — 시트로 바꾸지 않는다(SEED). 짧은 선택지를 화면을 덮는 시트로 열면 손이 더 가고 폼이 가려진다. 아래가 모자라면 위로 열린다. 시트가 필요한 것 — 달력 · 시각 · 아이콘 격자 · 검색해 고르는 긴 목록 — 은 Select 가 아니라 Input Button 이 연다.

고르는 컴포넌트 고르기제목 링크 복사

고르는 컴포넌트를 고르는 표는 여기 한 곳이다 — Radio · Checkbox · Switch · Chip · Select Box · Segmented Control · Tabs · List · Searchable List · Wheel Picker · Menu 문서는 선택지 개수를 다시 적지 않고 이 절을 가리키며, 자기 짝 비교 표만 둔다. 선택지 개수의 숫자(2 ~ 4 · 5 이상)도 아래 판단 순서 하나다(2026-10-22 사용자 결정 1B · 2B — https://claude.ai/artifact/SmHD31RQxTjWbfK83nbcym).

먼저 — 이 자리는 무슨 일을 하나

폼 값 — 위에서부터 판단한다

선택지마다 필요한 정보의 양, 선택지 개수, 글 길이로 고른다. 위에서부터 판단한다(SEED — 2026-10-01 사용자 결정). "이럴 때 더 맞다" 열은 SEED Radio 문서의 판단 기준이다.

• 요일 7개도 2 — 여럿 고르는 Select 다("월, 수, 금").
• 폼 값을 탭(Segmented Control · Tabs)으로 고르지 않는다 — 탭은 보이는 내용을 바로 거르거나 바꾸는 자리다. 폼 값의 탭은 Chip · Select 로 옮긴다.

예외 · 주의

• 저장 폼 안의 Switch — 값이 저장 때 들어가도 누르면 화면이 바로 바뀌면 Switch 다(일정 "종일" — 날짜 칸이 바뀐다). Switch 결정(누르는 순간만) 안의 경계다 — 경계 사례는 Checkbox 의 "Checkbox 와 Switch" 표.
• 거르기 칩은 개수 규칙이 다르다 — 폼 값 칩은 2 ~ 4(판단 순서 3), 거르기 칩은 개수가 바뀌거나 5개 이상인 축(카테고리 · 태그)에 쓴다(Chip 필터 바). 2 ~ 4가지로 고정된 보기는 Segmented Control.
• 늘어날 수 있는 목록 — 지금 셋이어도 사용자가 더할 수 있는 목록(카테고리 · 결제 수단)은 Select 다(SEED Radio "앞으로 더 늘어날 가능성").
• 선택지가 하나면 Checkbox — 설명 · 딸린 입력이 붙어도("고정 금액 사용").
• 글이 칸보다 길면 다른 컴포넌트 — Segmented Control 칸 글이 줄을 바꾸면 Chip · Select 로.
• 컨트롤을 끼운 줄(스위치 · 체크 · 라디오)에는 다른 버튼을 두지 않는다 — 줄 전체가 라벨이다(List).
• Menu 로 값을 고르지 않는다 — 테마는 List 라디오 줄, 정렬 · 보기는 Segmented Control · Select. 고른 표시가 없는 목록으로 값을 고르면 지금 값이 안 보인다.

Select 와 Menu제목 링크 복사

Menu 는 누르는 순간 실행되는 명령 목록이고, Select 는 폼에 넣을 값을 고르는 입력이다.

코드제목 링크 복사

레시피 recipes/shadcn/components/ui/select.tsx(Select · SelectGroup · SelectItem)를 Field 안에 둔다. 선택지는 글(label)을 속성으로 받는다 — 목록이 닫혀 있어도 트리거 · 글자로 찾기(typeahead)가 그 글을 쓴다. 아래 미리보기는 스펙 값으로 그린 모습이다.

기본제목 링크 복사

import { Field } from "@/components/ui/field"
import { Select, SelectItem } from "@/components/ui/select"

<Field label="통화">
  <Select placeholder="통화 선택" value={currency} onValueChange={setCurrency}>
    <SelectItem value="KRW" label="원" description="KRW" />
    <SelectItem value="USD" label="미국 달러" description="USD" />
    <SelectItem value="JPY" label="일본 엔" description="JPY" />
    <SelectItem value="EUR" label="유로" description="EUR" />
    <SelectItem value="CNY" label="중국 위안" description="CNY" />
  </Select>
</Field>

묶음 · 아이콘 · "없음"제목 링크 복사

import { Banknote, CircleSlash, CreditCard, Landmark } from "lucide-react"
import { Select, SelectGroup, SelectItem } from "@/components/ui/select"

<Field label="결제 수단">
  <Select placeholder="결제 수단 선택" value={asset} onValueChange={setAsset}>
    <SelectGroup>
      <SelectItem value="none" label="결제 수단 없음" prefixIcon={<CircleSlash />} />
    </SelectGroup>
    <SelectGroup label="카드">
      <SelectItem value="hyundai-m" label="현대카드 M" prefixIcon={<CreditCard />} />
      <SelectItem value="shinhan-deep" label="신한카드 Deep" prefixIcon={<CreditCard />} />
    </SelectGroup>
    <SelectGroup label="계좌 · 현금">
      <SelectItem value="kb" label="국민 주계좌" description="123-45-6789" prefixIcon={<Landmark />} />
      <SelectItem value="cash" label="현금" prefixIcon={<Banknote />} />
    </SelectGroup>
  </Select>
</Field>

여럿 고르기제목 링크 복사

<Field label="반복 요일" description="고른 요일마다 거래를 만들어요.">
  <Select multiple placeholder="요일 선택" value={days} onValueChange={setDays}>
    {["월", "화", "수", "목", "금", "토", "일"].map((d) => (
      <SelectItem key={d} value={d} label={`${d}요일`} />
    ))}
  </Select>
</Field>

value 는 고른 순서대로 쌓인다. 트리거 글은 formatValue 로 바꾼다 — 기본은 "월요일, 수요일" · 넘치면 "월요일 외 2개".

상태제목 링크 복사

<Field label="휴가 정책" invalid errorMessage="휴가 정책을 골라주세요.">
  <Select placeholder="휴가 정책 선택">…</Select>
</Field>
<Field label="통화" disabled>
  <Select defaultValue="KRW">…</Select>
</Field>
<Field label="부서" readOnly>
  <Select defaultValue="design">…</Select>
</Field>

Behavior제목 링크 복사

Accessibility제목 링크 복사

Do / Don't제목 링크 복사

✅ Do제목 링크 복사

• 모든 Select 를 Field 로 감싸 라벨을 단다.
• placeholder 는 "{값의 종류} 선택".
• "없음" 이 답이 될 수 있으면 "{칸 이름} 없음" 을 맨 앞 따로 묶음에.
• 여럿 고르기는 최대 개수를 Field 설명에.
• 선택지 글은 명사형으로 짧게, 부연은 한 줄 설명에.
• 폰에서도 칸 아래 목록 — 시트는 Input Button 으로.

❌ Don't제목 링크 복사

• placeholder 를 라벨 대신 쓰기.
• "해당 없음" · "선택 안 함" 처럼 칸마다 다른 "없음" 글, 지우기 버튼으로 "없음" 받기.
• "전체 선택" 처럼 다른 선택지를 바꾸는 선택지.
• 2 ~ 4개 짧은 선택지를 Select 로 숨기기(Chip · Radio), 검색이 필요한 긴 목록을 Select 로.
• 폼 값을 탭으로 고르기.
• 폰에서 medium(40) 쓰기.

Specification제목 링크 복사

select.yaml 의 규칙을 하나도 빼지 않고 조건마다 그린다 — 웹 · 앱이 Select 를 만들 때 이 값을 그대로 쓴다. 조건이 없는 Base 가 모든 조합에 걸리고, 뒤의 규칙이 앞의 같은 값을 덮는다. 상태는 enabled 에서 바뀌는 값만 적었다.

SEED 와 다른 점제목 링크 복사

• 누름 · 호버 · 키보드 위치 바탕은 불투명한 색 — 트리거 bg-layer-default-pressed, 목록 안 알약 bg-layer-floating-pressed. SEED bg.transparent-pressed 는 투명도가 있어 대비 검사기가 받지 않는다(v102). 묶음 사이 선도 불투명한 stroke-neutral-subtle(SEED stroke.neutral-muted 는 투명도가 있다).
• 그림자는 groo shadow-s3(v105 — SEED 와 구조는 같고 값은 groo).
• 아이콘은 lucide 선 아이콘(v106) — 셰브론 chevron-down, 고른 표시 check(선 2.5). SEED 는 채운 체크다.
• 선택지 커서는 pointer — SEED 는 default. groo 의 누르는 줄(List · Select Box)과 맞춘다.
• 트리거 이름은 라벨 하나 — SEED React 는 트리거에 고른 값을 따로 읽히지 않는다. groo 는 role="combobox" 의 값으로 고른 글이 읽힌다(라벨 + 값).

Migration notes제목 링크 복사

2026-10-30 — 저장된 빈 값은 "없음"제목 링크 복사

"없음 을 답으로 받기" 의 풀이 한 줄을 더했다 — 수정으로 연 기록의 빈 값(null)은 "{칸 이름} 없음", 자리 글은 새로 추가할 때만(2026-10-29 17-1 에서 웹 · 앱에 시킨 규칙). 값 변경 없음. 옛 스펙은 select.history/v-pre-cleanup-1030.md.

2026-10-25 — 목록 줄 ⋮ 를 걷은 결정에 맞춤제목 링크 복사

"고르는 컴포넌트 고르기" 표의 Menu 예 "거래 줄 ⋮ → 수정 · 복사 · 삭제" 를 "거래 상세 머리 ⋮ → 복사해 새로 쓰기 · 삭제" 로 — 목록 줄에는 ⋮ 를 두지 않는다(Menu 의 "줄의 동작", 2026-10-25 사용자 결정). 값 변경 없음.

2026-10-22 — 첫 갈래 그림제목 링크 복사

"먼저 — 이 자리는 무슨 일을 하나" 표에 그림 first-guide 를 더했다(고르는 법 1B 의 비용 줄 "사이트 그림 pick-guide 에 첫 갈래 그림 하나" — 스펙 PR1 에서 남은 것). 판단 순서 그림 pick-guide 는 그대로다. 값 변경 없음.

2026-10-22 — 고르는 컴포넌트 고르기를 한 곳에제목 링크 복사

"고르는 컴포넌트 고르기" 를 넓혀 고르는 표를 이 절 한 곳에 모았다 — 첫 갈래(이 자리는 무슨 일을 하나) 표, 판단 순서(10-01 결정 표에 SEED Radio 의 "이럴 때 더 맞다" 열), 예외 · 주의. 다른 문서(Radio · Select Box · Segmented Control · Tabs · Searchable List · Wheel Picker · Menu · Checkbox · Switch)는 선택지 개수를 지우고 이 절을 가리키며 자기 짝 비교 표만 둔다. 선택지 개수는 이 표의 2 ~ 4 · 5 이상 하나다 — Radio "2 ~ 5 · 6 이상" · Select Box "2 ~ 6 · 7 이상" · Wheel Picker "5개 이하" 를 걷었다(사용자 결정 1B · 2B — https://claude.ai/artifact/SmHD31RQxTjWbfK83nbcym). 값 변경 없음.

2026-10-17 — 앱 선택지 낭독(03-B 결정 2 A)제목 링크 복사

스펙이 웹 ARIA(listbox · option)만 적고 앱의 의미 트리를 말하지 않았다(조사 03B-004 · 005). 사용자가 비교 페이지에서 "지금 그대로"(A)를 골랐다 — 앱 PSelect 선택지(p_select.dart:933~940)의 Semantics(container, button: true, selected, checked: multiple ? selected : null, label) 를 스펙 줄로 적었다(Accessibility 의 ARIA). 코드는 바뀌지 않는다 — 앱은 하나 고르기 선택지가 button + selected · 여럿 고르기가 checked 인지 위젯 테스트로 고정한다. 하나 고르기를 라디오로 바꾸는 안(B)은 고르지 않았다. 옛 스펙은 select.history/v-pre-03e-03b.md.

2026-10-15 — 남은 화면 · 앱의 체크 굵기제목 링크 복사

구현 세션 질문 두 가지를 있는 규칙으로 정리했다.

• "남은 화면" 은 목록이 놓이는 쪽의 트리거 ~ 화면 가장자리 8(Q-008-1). 웹(Radix 의 가용 높이) · 앱이 이미 그렇게 잰다. 열면 초점이 목록으로 가 입력 칸의 키보드가 내려가므로, 목록이 떠 있는 동안 키보드가 올라와 있는 경우는 없다 — 키보드를 세는 규칙을 두지 않는다. "Content" 절 문장을 고쳤다.
• 고른 표시 check 선 2.5 는 그대로(Q-008-2). 앱은 굵기를 바꿀 수 있다 — lucide 의 2.5 굵기 글꼴(LucideIcons.check500)을 쓴다. 앱이 이미 탭 바 · 떠 있는 버튼에서 같은 글꼴(house500 · plus500)을 쓴다.

2026-10-01 — SEED Select 로제목 링크 복사

사용자가 비교 페이지에서 여덟 가지를 모두 SEED 로 정했다 — Select(짧은 선택지 5개 이상 · 칸 아래 목록)와 Input Button(달력 · 시각 · 아이콘 격자 · 긴 목록을 시트 · 팝오버로)으로 나눈다 · 폰에서도 칸 아래 목록 · 목록 모양 SEED 그대로 · "없음" 은 "{칸 이름} 없음" 선택지(맨 앞 따로 묶음, Select 에 지우기 버튼 없음) · 여럿 고르기를 둔다 · 고르는 컴포넌트 순서 SEED 그대로(요일 7개도 Select, 폼 값의 탭은 걷는다) · Input Button 은 1280 미만 시트 · 이상 팝오버, 달력 · 시각은 "완료" 로 확정 · 긴 목록은 Input Button + 검색 시트(Combobox 를 두지 않는다). 옛 스펙은 select.history/v-pre-seed-select.* 에 남겼다.

레시피는 Radix Select 대신 Radix Popover 위에 목록(role="listbox")을 직접 짰다 — Radix Select 는 여럿 고르기를 받지 않는다.

제품은 앱 적용 단계에서 옮긴다(2026-10-01 조사 — 세 제품 코드를 읽고 일부는 크로미움에 띄워 쟀다).

• Desk 웹 — Select 29(40 · 글자 15 · 모서리 4 · 채운 바탕, Field 라벨 연결 0/29) · 날짜 14 · 시각 6 · 월 고르기 7 · 폼 값을 고르는 Tabs 16. 고르는 칸 높이 40 / 36 / 33.5 / 32 / 28 / 20, 셰브론 7가지(하나도 안 돈다), 목록 4가지, "없음" 글 8가지(선택 안 함 · 일시불 · 가져오지 않음 · 최상위 카테고리로 두기 · 라벨이 없습니다 · 태그 없음 · 반복 없음 · 없음 — 맨 앞 · 맨 뒤 섞임). 다크에서 목록 그림자가 라이트 값, 키보드 위치 1.12:1, 키보드로 못 쓰는 고르기 4.
• Desk 앱 — PSelect 24(칸 43 · 40 · 모서리 4) · 값 고르기 탭 15 · 칩 · 타일 단일 15무리 · 다중 11무리. 고른 상태 모양 17가지. 목록에 없는 값이면 칸이 비고 값은 그대로 저장된다(D1), 숨겨진 자산이 "선택 안 함" 으로 보이며 저장된다(D2), 반복 폼이 낡은 값을 저장한다(D3), 비활성 PSelect 가 활성과 같다(D8), 영어 모드에 한국어(D10 · D11). 계좌 종류 6칸 탭은 "마이너스통장" 이 어느 폰 폭에도 안 들어간다.
• HR 웹 — Select 72(36 · 글자 14, 폭 세 가지, Field 라벨 연결 11/72) · 사람 고르기 7(검색 없음) · 역할 콤보박스 1. 예 / 아니오를 Select 로 받는 칸 3(→ Checkbox), 코드값(Y · N · ANNUAL · user_id)이 글로 보인다, 2 ~ 4개 폼 값 16칸이 모두 Select(→ Chip). 테두리 대비 1.16 · 셰브론 1.91.