Dropdown

Dropdown List

옵션의 수가 5개를 초과할 경우 라디오 버튼보다는 드롭다운 사용을 권장합니다.

basic select

tui select

multi select dropdown

옵션의 수가 5개를 초과할 경우 체크박스보다는 드롭다운 사용을 권장합니다.
다중의 선택이 가능하며, 전체선택을 on/off 할 수 있습니다.

          
    <select class="formSelect is-option">
      <option value="선택옵션1">선택옵션1</option>
      <option value="선택옵션2">선택옵션2</option>
      <option value="선택옵션3">선택옵션3</option>
    </select>
    <select class="formSelect is-option is-hover">
      <option value="선택옵션1">선택옵션1</option>
      <option value="선택옵션2">선택옵션2</option>
      <option value="선택옵션3">선택옵션3</option>
    </select>
    <select class="formSelect is-option is-error">
      <option value="선택옵션1">선택옵션1</option>
      <option value="선택옵션2">선택옵션2</option>
      <option value="선택옵션3">선택옵션3</option>
    </select>
    <select class="formSelect is-option is-disabled">
      <option value="선택옵션1">선택옵션1</option>
      <option value="선택옵션2">선택옵션2</option>
      <option value="선택옵션3">선택옵션3</option>
    </select>
    <select class="formSelect is-option is-readonly">
      <option value="선택옵션1">선택옵션1</option>
      <option value="선택옵션2">선택옵션2</option>
      <option value="선택옵션3">선택옵션3</option>
    </select>

    <div class="formSelect">
      <div class="select-1"></div>
    </div>
    <div class="formSelect">
      <div class="select-2 is-hover"></div>
    </div>
    <div class="formSelect">
      <div class="select-2 is-error"></div>
    </div>
    <div class="formSelect">
      <div class="select-3 is-disabled"></div>
    </div>
    <div class="formSelect">
      <div class="select-4 is-readonly"></div>
    </div>
    <script>
      window.addEventListener("DOMContentLoaded", function () {

        const selectBox1 = new SelectBox('.select-1', {
          placeholder: '선택옵션 1라인',
          data: [
            { label: '선택옵션1', value: '선택옵션 1라인' },
            { label: '선택옵션2', value: '선택옵션 2라인' },
            { label: '선택옵션3', value: '선택옵션 3라인' },
            { label: '선택옵션4', value: '선택옵션 4라인' },
          ],
          showIcon: false,
          // disabled: true,
        });

        const selectBox2 = new SelectBox('.select-2', {
          placeholder: '선택옵션 1라인',
          data: [
            { label: '선택옵션1', value: '선택옵션 1라인' },
            { label: '선택옵션2', value: '선택옵션 2라인' },
            { label: '선택옵션3', value: '선택옵션 3라인' },
            { label: '선택옵션4', value: '선택옵션 4라인' },
          ],
          showIcon: false,
          // disabled: true,
        });

        const selectBox3 = new SelectBox('.select-3', {
          placeholder: '선택옵션 1라인',
          data: [
            { label: '선택옵션1', value: '선택옵션 1라인' },
            { label: '선택옵션2', value: '선택옵션 2라인' },
            { label: '선택옵션3', value: '선택옵션 3라인' },
            { label: '선택옵션4', value: '선택옵션 4라인' },
          ],
          showIcon: false,
          // disabled: true,
        });

        const selectBox4 = new SelectBox('.select-4', {
          placeholder: '선택옵션 1라인',
          data: [
            { label: '선택옵션1', value: '선택옵션 1라인' },
            { label: '선택옵션2', value: '선택옵션 2라인' },
            { label: '선택옵션3', value: '선택옵션 3라인' },
            { label: '선택옵션4', value: '선택옵션 4라인' },
          ],
          showIcon: false,
          disabled: true,
        });

        const selectBox5 = new SelectBox('.select-5', {
          placeholder: '선택옵션 1라인',
          data: [
            { label: '선택옵션1', value: '선택옵션 1라인' },
            { label: '선택옵션2', value: '선택옵션 2라인' },
            { label: '선택옵션3', value: '선택옵션 3라인' },
            { label: '선택옵션4', value: '선택옵션 4라인' },
          ],
          showIcon: false,
          disabled: true,
        });
      });
    </script>

    <select class="formMultiselect" name="field1" id="field1" multiple multiselect-search="true" data-multiselect-select-all="true" data-multiselect-max-items="1" onchange="console.log(this.selectedOptions)">
      <option>옵션01</option>
      <option>옵션02</option>
      <option>옵션03</option>
      <option>옵션04</option>
      <option>옵션05</option>
      <option>옵션06</option>
      <option>옵션07</option>
    </select>

Reference

Multi select

Calendar

Dropdown Calendar

특정일, 시간을 지정할 때 사용합니다.

Date Picker

Time Picker

          
    <div class="datePicker">
      <input type="text" id="datePicker_input1" class="datePicker__input" placeholder="날짜를 선택하세요" />
      <div id="datePicker_calendar1" class="datePicker__calendar"></div>
    </div>
    <div class="datePicker mb-10">
      <input type="text" id="datePicker_input2" class="datePicker__input" placeholder="날짜를 선택하세요" disabled/>
      <div id="datePicker_calendar2" class="datePicker__calendar"></div>
    </div>
    <div class="datePicker">
      <input type="text" id="datePicker_input3" class="datePicker__input" placeholder="날짜를 선택하세요" readonly/>
      <div id="datePicker_calendar3" class="datePicker__calendar"></div>
    </div>

    <div id="timepicker-spinbox-ko"></div>

Calendar Range

기간을 설정할 때 사용합니다.

Calendar Monthly / Years

일력 캘린더의 년/월 부분을 클릭하면 Monthly 캘린더로 변환합니다.
Monthly 캘린더의 년 부분을 클릭하면 Years 캘린더로 변환합니다.
월, 년 지정만 필요한 경우 단독으로 사용 가능합니다.

          
    <div class="dateRange">
    <div class="datePicker">
      <input type="text" id="datePicker_input_start" class="datePicker__input" placeholder="날짜를 선택하세요" />
      <div id="datePicker_calendar_start" class="datePicker__calendar"></div>
    </div>
    <div class="datePicker__mid">~</div>
    <div class="datePicker">
      <input type="text" id="datePicker_input_end" class="datePicker__input" placeholder="날짜를 선택하세요" />
      <div id="datePicker_calendar_end" class="datePicker__calendar"></div>
    </div>
    </div>

    <div class="datePicker">
      <input type="text" id="datePicker_input4" class="datePicker__input" placeholder="날짜를 선택하세요" />
      <div id="datePicker_calendar4" class="datePicker__calendar"></div>
    </div>

    <div class="datePicker">
      <input type="text" id="datePicker_input5" class="datePicker__input" placeholder="날짜를 선택하세요" />
      <div id="datePicker_calendar5" class="datePicker__calendar"></div>
    </div>