KRDS Angular

체크박스 Checkbox ​

체크박스는 사용자가 여러 개의 옵션 중 한 개 이상의 값을 선택할 수 있도록 하는 경우에 사용한다. 즉, 체크박스 옵션의 선택은 상호배타적이므로 한 개의 옵션을 선택하는 것은 다른 옵션의 선택에 영향을 미치지 않는다.

KRDS 가이드

기본 ​

<krds-checkbox> 안에 기본 <input type="checkbox">를 krdsControl과 함께 넣고, 그 뒤에 레이블 문구를 씁니다. 컴포넌트가 input 바로 뒤에 label을 만들어 input의 id로 연결합니다 (id를 주지 않으면 자동으로 만듭니다). 선택 상태와 disabled는 기본 input 그대로라 [(ngModel)]로 boolean 값을 연결하고, reactive forms(formControlName)와 Signal Forms도 그대로 씁니다.

description으로 레이블 아래에 부가 설명을 넣습니다. 묶음은 krdsCheckArea로 감싸 가로로 배치하고, column을 주면 세로로 배치합니다. 한 질문에 대한 체크박스 여러 개는 <fieldset krdsCheckArea>와 <legend>로 묶습니다.

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

@Component({
  selector: 'demo-checkbox-basic',
  imports: [KrdsCheckbox, KrdsCheckArea, KrdsControl, FormsModule],
  template: `
    <div style="display: flex; flex-direction: column; gap: 2rem">
      <div krdsCheckArea>
        <krds-checkbox><input type="checkbox" krdsControl [(ngModel)]="basic" />기본</krds-checkbox>
        <krds-checkbox><input type="checkbox" krdsControl [(ngModel)]="selected" />선택됨</krds-checkbox>
        <krds-checkbox><input type="checkbox" krdsControl [(ngModel)]="disabled" disabled />비활성화</krds-checkbox>
        <krds-checkbox><input type="checkbox" krdsControl [(ngModel)]="disabledSelected" disabled />선택된 비활성화</krds-checkbox>
      </div>

      <div krdsCheckArea column>
        <krds-checkbox description="부가적인 설명이 들어갑니다.">
          <input type="checkbox" krdsControl [(ngModel)]="description1" />
          체크박스
        </krds-checkbox>
        <krds-checkbox description="부가적인 설명이 들어갑니다.">
          <input type="checkbox" krdsControl [(ngModel)]="description2" />
          체크박스
        </krds-checkbox>
      </div>
    </div>
  `
})
export default class CheckboxBasic {
  readonly basic = signal(false)
  readonly selected = signal(true)
  readonly disabled = signal(false)
  readonly disabledSelected = signal(true)
  readonly description1 = signal(false)
  readonly description2 = signal(false)
}

사이즈 ​

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

@Component({
  selector: 'demo-checkbox-sizes',
  imports: [KrdsCheckbox, KrdsCheckArea, KrdsControl, FormsModule],
  template: `
    <div style="display: flex; flex-direction: column; gap: 1.5rem">
      <div krdsCheckArea>
        <krds-checkbox size="medium"><input type="checkbox" krdsControl [(ngModel)]="medium" />Medium 크기 체크박스</krds-checkbox>
      </div>
      <div krdsCheckArea>
        <krds-checkbox size="large"><input type="checkbox" krdsControl [(ngModel)]="large" />Large 크기 체크박스</krds-checkbox>
      </div>
    </div>
  `
})
export default class CheckboxSizes {
  readonly medium = signal(false)
  readonly large = signal(false)
}

Chip ​

chip을 주면 칩 모양으로 표시됩니다. 칩 스타일에서는 description을 표시하지 않습니다.

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

@Component({
  selector: 'demo-checkbox-chip',
  imports: [KrdsCheckbox, KrdsCheckArea, KrdsControl, FormsModule],
  template: `
    <div krdsCheckArea>
      <krds-checkbox chip><input type="checkbox" krdsControl [(ngModel)]="checked1" />Chip 체크박스 1</krds-checkbox>
      <krds-checkbox chip><input type="checkbox" krdsControl [(ngModel)]="checked2" />Chip 체크박스 2 (선택됨)</krds-checkbox>
      <krds-checkbox chip><input type="checkbox" krdsControl [(ngModel)]="checked3" disabled />Chip 체크박스 3</krds-checkbox>
    </div>
  `
})
export default class CheckboxChip {
  readonly checked1 = signal(false)
  readonly checked2 = signal(true)
  readonly checked3 = signal(false)
}

KrdsCheckbox ​

선택자 krds-checkbox, krds-radio

Inputs

이름타입기본값설명
size'medium' | 'large''medium'크기
chipbooleanfalseChip 스타일
descriptionstring-레이블 아래 부가 설명 (Chip 스타일에서는 표시하지 않음)

KrdsCheckArea ​

선택자 [krdsCheckArea]

Inputs

이름타입기본값설명
columnbooleanfalse세로(컬럼) 배치

KrdsControl ​

선택자 [krdsControl]

Inputs

이름타입기본값설명
idstring`krds-control-${nextId++}`요소 id (없으면 자동 생성)