KRDS Angular

토글 스위치 Toggle switch ​

토글은 상호 배타적인 두 가지 상태를 전환하는 데 사용되는 요소이다.

KRDS 가이드

기본 ​

<krds-toggle-switch> 안에 기본 <input type="checkbox">를 krdsControl과 함께 넣고, 그 뒤에 스위치 이름을 씁니다. 컴포넌트가 input 바로 뒤에 스위치 모양 label을 만들어 연결합니다. 켜짐 상태와 disabled는 기본 input 그대로라 [(ngModel)]로 boolean 값을 연결하고, reactive forms와 Signal Forms도 그대로 씁니다.

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

@Component({
  selector: 'demo-toggle-switch-basic',
  imports: [KrdsToggleSwitch, KrdsControl, FormsModule],
  template: `
    <krds-toggle-switch><input type="checkbox" krdsControl [(ngModel)]="checked" />switch : default</krds-toggle-switch>
    <p style="margin-top: 1rem">현재 상태: {{ checked() ? '켜짐' : '꺼짐' }}</p>
  `
})
export default class ToggleSwitchBasic {
  readonly checked = signal(false)
}

크기 ​

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

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

KrdsToggleSwitch ​

선택자 krds-toggle-switch

Inputs

이름타입기본값설명
size'medium' | 'large''medium'크기

KrdsControl ​

선택자 [krdsControl]

Inputs

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