체크박스

type basic (01)

<%- include(`${_src}/views/components/form/input-checkbox.ejs`, {
    variant: 'basic', // basic 타입
    size: 's',        // s, m
    name: 'ckbox1',
    list: 'column',   // column 또는 row 
    gap: 16,          // list gap(간격)
    datas: [
      {
        text: '오늘출발',
        value:'오늘출발',
        checked: false,  // 기본값 false (true일 때만 기입해도 됨)
        disabled: false, // 기본값 false (true일 때만 기입해도 됨)
        required: false, // 기본값 false (true일 때만 기입해도 됨)
      },
      {
        text: '내일출발',
        value:'내일출발',
        checked: false,  // 기본값 false (true일 때만 기입해도 됨)
        disabled: false, // 기본값 false (true일 때만 기입해도 됨)
        required: false, // 기본값 false (true일 때만 기입해도 됨)
      },
    ]
  }) %>
          

type basic (2)

<%- include(`${_src}/views/components/form/input-checkbox.ejs`, {
    variant: 'basic', // basic 타입
    size: 'm',        // s, m
    name: 'ckbox2',
    list: 'column',   // column 또는 row
    gap: 16,
    datas: [
      {
        text: 'CRETOS 용접봉',
        value:'CRETOS 용접봉',
        qty: 15,
        checked: false,  // 기본값 false (true일 때만 기입해도 됨)
        disabled: false, // 기본값 false (true일 때만 기입해도 됨)
        required: false, // 기본값 false (true일 때만 기입해도 됨)
      },
      {
        text: 'GEMINI',
        value:'GEMINI',
        qty: 1,
        checked: false,  // 기본값 false (true일 때만 기입해도 됨)
        disabled: false, // 기본값 false (true일 때만 기입해도 됨)
        required: false, // 기본값 false (true일 때만 기입해도 됨)
      },
    ]
  }) %>

type card

<%- include(`${_src}/views/components/form/input-checkbox.ejs`, {
  variant: 'card',  // 카드 타입
  name: 'ckbox3',
  list: 'column',   // column 또는 row
  gap: 18,
  datas: [
    {
      text: '폴더명 입니다',
      value: '폴더명 입니다',
      total: 12,
      checked: false,  // 기본값 false (true일 때만 기입해도 됨)
      disabled: false, // 기본값 false (true일 때만 기입해도 됨)
      required: false, // 기본값 false (true일 때만 기입해도 됨)
    },
    {
      text: 'ABCD',
      value: 'ABCD',
      total: 30,
      checked: false,  // 기본값 false (true일 때만 기입해도 됨)
      disabled: false, // 기본값 false (true일 때만 기입해도 됨)
      required: false, // 기본값 false (true일 때만 기입해도 됨)
    },
    {
      text: '긴 폴더명 말줄임을 적용 긴 폴더명 말말줄줄이이이임!!',
      value: '250',
      total: 10,
      checked: false,  // 기본값 false (true일 때만 기입해도 됨)
      disabled: false, // 기본값 false (true일 때만 기입해도 됨)
      required: false, // 기본값 false (true일 때만 기입해도 됨)
    }
  ]
  }) %>

type single

<%- include(`${_src}/views/components/form/input-checkbox-single.ejs`, {
  datas: [
    {
      className: 's',
      name: 'ckbox1',
      value: 'checkbox-single-s',
      srText: '단독 체크박스 (S)',
    },
    {
      className: 'm',
      name: 'ckbox2',
      value: 'checkbox-single-m',
      checked: true,
      srText: '단독 체크박스 (M)',
    },
    {
      className: 'l',
      name: 'ckbox3',
      value: 'checkbox-single-l',
      srText: '단독 체크박스 (L)',
    },
    {
      className: 's',
      name: 'vits-cart-checkbox',
      value: 'vits-cart-checkbox',
      srText: '동의 체크란',
      agreeText: '동의하기 같은 UI가 필요할 때 사용합니다.',
    },
  ],
}) %>
            

checkbox-item (단일 사용)

<!-- 전체 선택 / 아이템 관련 -->
<div data-checkbox-scope> <!-- 스코프 컨테이너 -->
<%- include(`${_src}/views/components/form/checkbox-item.ejs`, {
  name: 'ckbox01',
  value: 'all',
  checkboxType: 'all',
  text="전체 선택"          // 전체 선택 체크박스
}) %>
<%- include(`${_src}/views/components/form/checkbox-item.ejs`, {
  name: 'ckbox01',
  value: 'all',
  checkboxType: 'item',
  text="항목"            // 개별 아이템 체크박스 (여러 개)
  suffix: '(필수)', // 필수 체크박스 라벨 뒤에 붙는 텍스트 (class=label-tag)
}) %>
</div>

<!-- 단일 -->
<%- include(`${_src}/views/components/form/checkbox-item.ejs`, {
  name: 'ckbox01',
  value: 'all',
  checkboxType: 'item',
}) %>

<!-- 사이즈 -->
<%- include(`${_src}/views/components/form/checkbox-item.ejs`, {
  name: 'ckbox01',
  value: 'all',
  checkboxType: 'item',
  size: 'x' | 'm' | 'l' | 'xl' | 'xxl'
}) %>
            
  • 아이콘만 - size: 's'

  • 아이콘만 - size: 'm'

  • 아이콘만 - size: 'l'

  • 아이콘만 - size: 'xl'

  • 아이콘만 - size: 'xxl'

checkbox-toggle

<%- include(`${_src}/views/components/form/checkbox-toggle.ejs`, {
  name: 'ckb-i1',
  value: 'ckb-i1',
  label: '전체 알림 동의'
}) >

* _checkboxType : checkbox-item 에서 사용하는 방법과 동일
                   ㄴ 'all' : 전체 선택 / 'item' : 개별 항목