Select

드롭다운 선택 컴포넌트

Select#

옵션 목록에서 하나를 선택할 수 있는 드롭다운 컴포넌트입니다.

사용법#

CouiSelect<String>(
  onChanged: handleCategoryChange,
  placeholder: '카테고리를 선택하세요',
  items: [
    SelectItem(value: 'fruit', label: '과일'),
    SelectItem(value: 'vegetable', label: '채소'),
    SelectItem(value: 'meat', label: '육류'),
  ],
)

// 초기값 설정
CouiSelect<String>(
  value: 'fruit',
  onChanged: handleCategoryChange,
  items: [
    SelectItem(value: 'fruit', label: '과일'),
    SelectItem(value: 'vegetable', label: '채소'),
  ],
)

Select<String>(
  onChange: handleCategoryChange,
  placeholder: '카테고리를 선택하세요',
  items: [
    SelectItem(value: 'fruit', label: '과일'),
    SelectItem(value: 'vegetable', label: '채소'),
    SelectItem(value: 'meat', label: '육류'),
  ],
)

Props / Parameters#

속성	타입	기본값	설명
`value`	`T?`	`null`	현재 선택된 값
`onChanged`	`ValueChanged<T?>?`	`null`	선택 변경 콜백
`items`	`List<SelectItem<T>>`	필수	선택 항목 목록
`placeholder`	`String?`	`null`	미선택 시 표시 텍스트
`enabled`	`bool`	`true`	활성화 여부
`label`	`String?`	`null`	라벨 텍스트

변형 (Variants)#

그룹화된 옵션#

CouiSelect<String>(
  onChanged: handleChange,
  groups: [
    SelectGroup(
      label: '과일',
      items: [
        SelectItem(value: 'apple', label: '사과'),
        SelectItem(value: 'banana', label: '바나나'),
      ],
    ),
    SelectGroup(
      label: '채소',
      items: [
        SelectItem(value: 'carrot', label: '당근'),
        SelectItem(value: 'spinach', label: '시금치'),
      ],
    ),
  ],
)

비활성화된 항목#

CouiSelect<String>(
  onChanged: handleChange,
  items: [
    SelectItem(value: 'a', label: '사용 가능'),
    SelectItem(value: 'b', label: '사용 불가', enabled: false),
  ],
)