Select

공간을 적게 쓰는 네이티브 메뉴에서 값을 고르게 할 때 사용합니다. 선택지를 검색해야 한다면 Combobox가 적합합니다.

미리보기

지역 그룹과 잠긴 선택

아시아 태평양·북아메리카 그룹에서 도시를 선택하고 관리자가 지정한 비활성 값을 비교합니다.

지역

비활성

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/select

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

지역 그룹과 잠긴 선택

npx shadcn@latest add @neumorphism-ui/label @neumorphism-ui/select

Registry JSON

사용법

Select에 레이블과 폼 이름을 제공하고 안정적인 value를 가진 SelectItem을 추가하세요. 선택지를 이름 있는 그룹으로 묶을 때는 SelectGroup을 사용합니다.

"use client";

import { useId } from "react";
import { Label } from "@/components/ui/label";
import { Select, SelectItem } from "@/components/ui/select";

export default function Example() {
  const id = useId();
  return (
    <div className="grid gap-2">
      <Label htmlFor={id}>Role</Label>
      <Select id={id} name="role" defaultValue="designer">
        <SelectItem value="designer">Designer</SelectItem>
        <SelectItem value="developer">Developer</SelectItem>
      </Select>
    </div>
  );
}

API 레퍼런스

native select, optgroup, option을 그대로 사용하면서 inset field와 장식 chevron을 적용합니다. 모바일 플랫폼의 기본 picker와 폼 제출 동작을 유지합니다.

컴포넌트	속성	타입	기본값	설명
`Select`	`value / defaultValue`	`string \| string[]`	`—`	controlled 또는 초기 uncontrolled 선택 값입니다.
`Select`	`onChange`	`React.ChangeEventHandler<HTMLSelectElement>`	`—`	native select 값이 바뀔 때 호출됩니다.
`Select`	`disabled / required / multiple`	`boolean`	`false`	native select의 입력 제약과 다중 선택을 설정합니다.
`SelectItem`	`value`필수	`string \| number \| readonly string[]`	`—`	option이 제출하는 값입니다.
`SelectGroup`	`label`필수	`string`	`—`	optgroup의 선택지 묶음 이름입니다.

미리보기

지역 그룹과 잠긴 선택

설치

사용법

API 레퍼런스

접근성