Podo UI

Podo UI

체크박스 & 라디오

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

checkbox.title

checkbox.description

HTML
<label>
  <input type="checkbox" />
  checkbox.option
</label>

<label>
  <input type="checkbox" checked />
  checkbox.checked
</label>

<label>
  <input type="checkbox" disabled />
  checkbox.disabled
</label>

<label>
  <input type="checkbox" checked disabled />
  checkbox.checkedDisabled
</label>
demo.title

indeterminate.title

indeterminate.description

JavaScript
const checkbox = document.querySelector('#myCheckbox');
checkbox.indeterminate = true;
demo.title

radio.title

radio.description

HTML
<label>
  <input type="radio" name="option" value="1" checked />
  radio.option1
</label>

<label>
  <input type="radio" name="option" value="2" />
  radio.option2
</label>

<label>
  <input type="radio" name="option" value="3" />
  radio.option3
</label>

<label>
  <input type="radio" name="option" value="4" disabled />
  radio.disabledOption
</label>
demo.title

checkboxGroup.title

checkboxGroup.description

checkboxGroup.interests

radioGroup.title

radioGroup.description

radioGroup.payment

scss.title

scss.description

component.module.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;
    user-select: none;

    input[type='checkbox'] {
      margin-right: s(2);
    }

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

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

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

    input[type='radio'] {
      margin-right: s(2);
    }
  }
}

// code.customStyle
.customCheckbox {
  input[type='checkbox']:focus-visible {
    outline: 4px solid color(primary-outline);
  }
}

darkMode.title

darkMode.description