KRDS Angular

라디오 버튼 Radio button ​

라디오 버튼은 사용자가 여러 개의 옵션 중 하나만 선택할 수 있도록 하는 경우에 사용한다. 즉, 라디오 버튼 옵션의 선택은 상호배타적이므로 한 개의 옵션을 선택하면 다른 옵션은 자동으로 선택 해제된다.

KRDS 가이드

기본 ​

<krds-radio> 안에 기본 <input type="radio">를 krdsControl과 함께 넣고, 그 뒤에 레이블 문구를 씁니다. 컴포넌트가 input 바로 뒤에 label을 만들어 input의 id로 연결합니다 (id를 주지 않으면 자동으로 만듭니다). 선택 상태·name·value·disabled는 기본 input 그대로라 [(ngModel)], reactive forms, Signal Forms를 그대로 씁니다. 같은 그룹의 라디오는 같은 name과 모델을 쓰고, 선택한 라디오의 value가 모델 값이 됩니다.

description으로 레이블 아래에 부가 설명을 넣습니다. 묶음은 krdsCheckArea로 감싸 가로로 배치하고, column을 주면 세로로 배치합니다. 한 질문에 대한 라디오 묶음은 <fieldset krdsCheckArea>와 <legend>로 묶어 화면낭독기에 질문을 알립니다 (KRDS 스타일에서 legend는 화면에 보이지 않습니다).

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

@Component({
  selector: 'demo-radio-basic',
  imports: [KrdsRadio, KrdsCheckArea, KrdsControl, FormsModule],
  template: `
    <div style="display: flex; flex-direction: column; gap: 2rem">
      <fieldset krdsCheckArea>
        <legend>라디오 버튼 상태</legend>
        <krds-radio><input type="radio" krdsControl name="radio-basic" value="option1" [(ngModel)]="selected" />기본</krds-radio>
        <krds-radio><input type="radio" krdsControl name="radio-basic" value="option2" [(ngModel)]="selected" />선택됨</krds-radio>
        <krds-radio
          ><input type="radio" krdsControl name="radio-basic" value="option3" [(ngModel)]="selected" disabled />비활성화</krds-radio
        >
        <krds-radio>
          <input type="radio" krdsControl name="radio-basic-disabled" value="option4" [(ngModel)]="disabledSelected" disabled />
          선택된 비활성화
        </krds-radio>
      </fieldset>

      <fieldset krdsCheckArea column>
        <legend>부가 설명이 있는 라디오 버튼</legend>
        <krds-radio description="부가적인 설명이 들어갑니다.">
          <input type="radio" krdsControl name="radio-basic-description" value="option1" [(ngModel)]="withDescription" />
          라디오버튼
        </krds-radio>
        <krds-radio description="부가적인 설명이 들어갑니다.">
          <input type="radio" krdsControl name="radio-basic-description" value="option2" [(ngModel)]="withDescription" />
          라디오버튼
        </krds-radio>
      </fieldset>
    </div>
  `
})
export default class RadioBasic {
  readonly selected = signal('option2')
  readonly disabledSelected = signal('option4')
  readonly withDescription = signal('option1')
}

KrdsRadio ​

KrdsRadio는 KrdsCheckbox와 같은 컴포넌트입니다 (마크업이 같아 선택자 krds-radio를 함께 씁니다).

선택자 krds-checkbox, krds-radio

Inputs

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

KrdsCheckArea ​

선택자 [krdsCheckArea]

Inputs

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

KrdsControl ​

선택자 [krdsControl]

Inputs

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