Podo UI

Podo UI

Checkbox & Radio

Checkbox and radio button components for selection options.

Checkbox

Checkbox is an input element that allows multiple options to be selected.

HTML
<label>
  <input type="checkbox" />
  Option
</label>

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

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

<label>
  <input type="checkbox" checked disabled />
  Checked (Disabled)
</label>
Live Example:

Indeterminate State

Checkbox can have an indeterminate state. This can be set using JavaScript.

JavaScript
const checkbox = document.querySelector('#myCheckbox');
checkbox.indeterminate = true;
Live Example:

Radio Button

Radio button is an input element that allows only one option to be selected from multiple choices.

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

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

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

<label>
  <input type="radio" name="option" value="4" disabled />
  Disabled option
</label>
Live Example:

Checkbox Group

Multiple checkboxes can be grouped together.

Areas of Interest

Radio Group

Multiple radio buttons can be grouped together.

Payment Method

SCSS Styling

You can apply checkbox and radio styles using podo-ui mixins.

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);
    }
  }
}

// 커스텀 스타일
.customCheckbox {
  input[type='checkbox']:focus-visible {
    outline: 4px solid color(primary-outline);
  }
}

Dark Mode

Appropriate styles are automatically applied in dark mode.