KRDS Angular

셀렉트 Select ​

셀렉트는 사용자에게 여러 개의 옵션 목록을 팝업으로 제공하여 그 중 한 개의 값을 선택할 수 있도록 하는 경우에 사용한다.

KRDS 가이드

기본 ​

기본 <select>에 krdsSelect를 붙입니다. 옵션·선택 값·disabled·required는 기본 요소 그대로라 <option>을 직접 넣고 [(ngModel)], reactive forms, Signal Forms로 값을 연결합니다. 선택 전 안내 문구는 <option value="" disabled>선택</option>으로 넣습니다.

폼 그룹(<krds-form-group>) 안에 넣으면 label이 셀렉트에 연결되고, hint는 aria-describedby로 연결됩니다.

ts
import { Component, signal } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { KrdsFormGroup, KrdsSelect } from '@krds.ui/angular'

@Component({
  selector: 'demo-select-basic',
  imports: [KrdsFormGroup, KrdsSelect, FormsModule],
  template: `
    <div style="max-width: 400px">
      <krds-form-group label="거주 지역" hint="현재 거주하고 있는 지역을 선택해 주세요">
        <select krdsSelect [(ngModel)]="region">
          <option value="" disabled>선택</option>
          @for (option of options; track option.value) {
            <option [value]="option.value">{{ option.label }}</option>
          }
        </select>
      </krds-form-group>
    </div>
  `
})
export default class SelectBasic {
  readonly region = signal('')
  readonly options = [
    { value: 'seoul', label: '서울특별시' },
    { value: 'busan', label: '부산광역시' },
    { value: 'daegu', label: '대구광역시' },
    { value: 'incheon', label: '인천광역시' },
    { value: 'gwangju', label: '광주광역시' },
    { value: 'daejeon', label: '대전광역시' },
    { value: 'ulsan', label: '울산광역시' },
    { value: 'sejong', label: '세종특별자치시' }
  ]
}

사이즈 ​

size로 크기를 정합니다.

ts
import { Component, signal } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { KrdsFormGroup, KrdsSelect } from '@krds.ui/angular'

@Component({
  selector: 'demo-select-sizes',
  imports: [KrdsFormGroup, KrdsSelect, FormsModule],
  template: `
    <div style="display: flex; flex-direction: column; gap: 2rem; max-width: 400px">
      <krds-form-group label="Large">
        <select krdsSelect size="large" [(ngModel)]="large">
          @for (option of options; track option) {
            <option [value]="option">{{ option }}</option>
          }
        </select>
      </krds-form-group>
      <krds-form-group label="Medium">
        <select krdsSelect size="medium" [(ngModel)]="medium">
          @for (option of options; track option) {
            <option [value]="option">{{ option }}</option>
          }
        </select>
      </krds-form-group>
      <krds-form-group label="Small">
        <select krdsSelect size="small" [(ngModel)]="small">
          @for (option of options; track option) {
            <option [value]="option">{{ option }}</option>
          }
        </select>
      </krds-form-group>
    </div>
  `
})
export default class SelectSizes {
  readonly options = ['large', 'medium', 'small']
  readonly large = signal('large')
  readonly medium = signal('medium')
  readonly small = signal('small')
}

정렬 스타일 ​

sort를 주면 목록의 정렬 기준처럼 보이는, 레이블 없이 쓰는 셀렉트가 됩니다. 보이는 레이블이 없으므로 aria-label로 이름을 줍니다.

ts
import { Component, signal } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { KrdsSelect } from '@krds.ui/angular'

@Component({
  selector: 'demo-select-sort',
  imports: [KrdsSelect, FormsModule],
  template: `
    <select krdsSelect sort aria-label="정렬 기준" [(ngModel)]="sort">
      <option value="latest">최신순</option>
      <option value="popular">인기순</option>
      <option value="name">이름순</option>
    </select>
  `
})
export default class SelectSort {
  readonly sort = signal('latest')
}

에러 상태 ​

폼 그룹의 state="error"는 셀렉트에 오류 테두리와 aria-invalid="true"를 붙이고, hint를 오류 문구로 표시합니다. 폼 그룹 없이 테두리만 바꾸려면 셀렉트의 state를 씁니다 (이때 aria-invalid는 직접 붙입니다).

ts
import { Component, signal } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { KrdsFormGroup, KrdsSelect } from '@krds.ui/angular'

@Component({
  selector: 'demo-select-error',
  imports: [KrdsFormGroup, KrdsSelect, FormsModule],
  template: `
    <div style="max-width: 400px">
      <krds-form-group label="신청 유형" hint="신청 유형을 선택해 주세요" state="error">
        <select krdsSelect [(ngModel)]="type">
          <option value="" disabled>선택</option>
          <option value="item1">항목1</option>
          <option value="item2">항목2</option>
          <option value="item3">항목3</option>
        </select>
      </krds-form-group>
    </div>
  `
})
export default class SelectError {
  readonly type = signal('')
}

KrdsSelect ​

선택자 select[krdsSelect]

Inputs

이름타입기본값설명
size'small' | 'medium' | 'large''medium'크기
state'default' | 'error' | 'success' | 'information''default'입력 상태
sortbooleanfalse정렬 스타일 (목록 정렬 기준 선택용)
idstring`krds-control-${nextId++}`요소 id (없으면 자동 생성)