Podo UI

Podo UI

체크박스 & 라디오

체크박스와 라디오 버튼 컴포넌트

Import

@use 'podo-ui/scss/atom/checkbox';
@use 'podo-ui/scss/atom/radio';

체크박스

체크박스는 여러 옵션 중 하나 이상을 선택할 수 있는 입력 요소입니다.

HTML
<label>
  <input type="checkbox" />
  옵션
</label>

<label>
  <input type="checkbox" checked />
  선택됨
</label>

<label>
  <input type="checkbox" disabled />
  비활성화
</label>
미리보기

불확정 상태

체크박스가 부분적으로 선택된 상태를 나타냅니다. JavaScript로 설정해야 합니다.

JavaScript
const checkbox = document.querySelector('#myCheckbox');
checkbox.indeterminate = true;
미리보기

라디오

라디오 버튼은 여러 옵션 중 하나만 선택할 수 있는 입력 요소입니다.

HTML
<label>
  <input type="radio" name="option" value="1" checked />
  옵션 1
</label>

<label>
  <input type="radio" name="option" value="2" />
  옵션 2
</label>

<label>
  <input type="radio" name="option" value="3" disabled />
  비활성화된 옵션
</label>
미리보기

SCSS 스타일링 예시

SCSS
@use 'podo-ui/mixin' as *;

.checkboxWrapper {
  display: flex;
  flex-direction: column;
  gap: s(3);

  label {
    display: flex;
    align-items: center;
    gap: s(2);
    cursor: pointer;

    &:hover {
      color: color(primary);
    }
  }
}

.radioWrapper {
  display: flex;
  flex-direction: column;
  gap: s(3);

  label {
    display: flex;
    align-items: center;
    cursor: pointer;
  }
}