폼과 선택@neumorphism-ui/select

Select

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

@neumorphism-ui/select

Registry JSON

미리보기

지역

비활성

설치

npx shadcn@latest add @neumorphism-ui/select

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

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

Import

import {
  Select,
  SelectGroup,
  SelectItem,
} from "@/components/ui/select"
import { Label } from "@/components/ui/label"

Example

<div className="grid gap-2">
  <Label htmlFor="role">역할</Label>
  <Select id="role" name="role" defaultValue="designer">
    <SelectItem value="designer">Designer</SelectItem>
    <SelectItem value="developer">Developer</SelectItem>
    <SelectItem value="founder">Founder</SelectItem>
  </Select>
</div>

API 레퍼런스

컴포넌트	속성	타입	기본값	설명
`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의 선택지 묶음 이름입니다.

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성