WICKED컴포넌트 전체 보기
50개 컴포넌트와 실행형 업무 예제. 페이지마다 실물·사용 규칙·접근성·코드를 함께 제공합니다.
버튼
데이터 변경·실행·확정 동작의 사용·상태·접근성 계약.
실행 예제 · 규칙 · 코드 link링크
다른 페이지·자료·영역으로 이동의 사용·상태·접근성 계약.
실행 예제 · 규칙 · 코드 text-input텍스트 입력·텍스트 영역
자유로운 한 줄·여러 줄 데이터 입력의 사용·상태·접근성 계약.
실행 예제 · 규칙 · 코드 number-input숫자 입력
수량·자원량처럼 수치 연산 가능한 값의 사용·상태·접근성 계약.
실행 예제 · 규칙 · 코드 checkbox체크박스
여러 개의 독립 선택·선택 동의의 사용·상태·접근성 계약.
실행 예제 · 규칙 · 코드 radio-button라디오
서로 배타적인 한 가지 선택의 사용·상태·접근성 계약.
실행 예제 · 규칙 · 코드 toggle스위치
즉시 적용되는 가역적인 이진 설정의 사용·상태·접근성 계약.
실행 예제 · 규칙 · 코드 select셀렉트
폼에서 정해진 값 하나를 선택·제출의 사용·상태·접근성 계약.
실행 예제 · 규칙 · 코드 dropdown드롭다운·콤보박스
정렬·필터·검색 가능한 단일/다중 값 선택의 사용·상태·접근성 계약.
실행 예제 · 규칙 · 코드 search검색 입력
현재 목록 또는 전체 제품의 관련 항목 찾기의 사용·상태·접근성 계약.
실행 예제 · 규칙 · 코드 form폼
관련 입력을 한 작업으로 검증·저장의 사용·상태·접근성 계약.
실행 예제 · 규칙 · 코드 modal모달·확인 대화상자
짧은 확인·입력에 집중해야 하는 작업의 사용·상태·접근성 계약.
실행 예제 · 규칙 · 코드 notification알림·폼 피드백
작업 결과·복구 안내·상태 변경을 전달의 사용·상태·접근성 계약.
실행 예제 · 규칙 · 코드 data-table데이터 테이블
서버·청구서처럼 같은 속성을 가진 항목 비교의 사용·상태·접근성 계약.
실행 예제 · 규칙 · 코드 pagination페이지 나누기
큰 목록을 여러 페이지로 탐색의 사용·상태·접근성 계약.
실행 예제 · 규칙 · 코드 tabs탭
같은 문맥의 서로 다른 정보 영역 전환의 사용·상태·접근성 계약.
실행 예제 · 규칙 · 코드 accordion아코디언
필수가 아닌 긴 보조 내용을 점진적으로 공개의 사용·상태·접근성 계약.
실행 예제 · 규칙 · 코드 breadcrumb브레드크럼
현재 위치와 상위 계층으로의 복귀의 사용·상태·접근성 계약.
실행 예제 · 규칙 · 코드 tooltip툴팁
hover·focus에서 비필수 짧은 보조 설명의 사용·상태·접근성 계약.
실행 예제 · 규칙 · 코드 popover팝오버
현재 항목의 짧은 상세·상호작용 설명의 사용·상태·접근성 계약.
실행 예제 · 규칙 · 코드 tag태그·배지
분류·선택된 필터·간단한 상태 표시의 사용·상태·접근성 계약.
실행 예제 · 규칙 · 코드 tile타일·카드 표면
관련 정보·행동을 한 묶음으로 표시의 사용·상태·접근성 계약.
실행 예제 · 규칙 · 코드 file-uploader파일 업로드
파일 선택·전송·첨부 상태 관리의 사용·상태·접근성 계약.
실행 예제 · 규칙 · 코드 progress-bar진행률 표시
실제 작업량의 진행을 알림의 사용·상태·접근성 계약.
실행 예제 · 규칙 · 코드 progress-indicator단계 표시
예측 가능한 여러 순차 단계의 작업 안내의 사용·상태·접근성 계약.
실행 예제 · 규칙 · 코드 code-snippet코드·복사 가능한 값
읽기 전용 명령·설정·식별자 재사용의 사용·상태·접근성 계약.
실행 예제 · 규칙 · 코드 overflow-menu더보기 메뉴
공간이 부족한 곳의 보조 동작의 사용·상태·접근성 계약.
실행 예제 · 규칙 · 코드 tree-view트리 탐색
파일·폴더의 다단계 계층 탐색의 사용·상태·접근성 계약.
실행 예제 · 규칙 · 코드 ai-labelAI 표시·설명
AI가 생성·추천한 내용의 출처와 한계 설명의 사용·상태·접근성 계약.
실행 예제 · 규칙 · 코드 content-switcher콘텐츠 전환
동일한 데이터의 표/카드 등 대체 보기의 사용·상태·접근성 계약.
실행 예제 · 규칙 · 코드 password-input비밀번호 입력
비밀번호 값과 표시 여부를 독립적으로 다루는 입력입니다.
실행 예제 · 규칙 · 코드 date-input날짜·기간 입력
시작·종료일과 입력 오류를 명시하는 날짜 범위입니다.
실행 예제 · 규칙 · 코드 slider슬라이더·임계값
한계값을 범위 안에서 조절하고 숫자 입력과 동기화합니다.
실행 예제 · 규칙 · 코드 multi-select다중 선택·선택 칩
여러 항목을 고르고 검색·개별 해제로 수정합니다.
실행 예제 · 규칙 · 코드 input-group입력 접두·접미 단위
URL·단위의 고정 부분과 사용자가 편집하는 부분을 구분합니다.
실행 예제 · 규칙 · 코드 button-group버튼 그룹·보기 범위
같은 작업의 조회 범위를 한 영역에서 선택합니다.
실행 예제 · 규칙 · 코드 empty-state빈 화면·권한·실패
데이터 없음·검색 결과 없음·권한 없음·실패를 다른 상황으로 설명합니다.
실행 예제 · 규칙 · 코드 skeleton스켈레톤·로딩 자리
콘텐츠를 기다리는 동안 영역의 구조와 크기를 유지합니다.
실행 예제 · 규칙 · 코드 inline-edit인라인 수정·취소
목록 맥락을 유지하며 작은 값을 편집·저장·취소합니다.
실행 예제 · 규칙 · 코드 copy-field읽기 전용·주소 복사
수정하지 않되 선택·복사 가능한 식별자와 주소입니다.
실행 예제 · 규칙 · 코드 server-status서버 상태·전원 작업
전원·진행·정지·상태 미확인을 구분하는 호스팅 상태 행입니다.
실행 예제 · 규칙 · 코드 resource-meter리소스 사용량·한계
사용량·할당량·단위·데이터 신선도를 함께 보여줍니다.
실행 예제 · 규칙 · 코드 console-view서버 콘솔·명령 입력
서버 출력과 명령 입력을 분리하고 출력 중단 상태를 명시합니다.
실행 예제 · 규칙 · 코드 file-browser파일 목록·폴더 탐색
파일명·폴더·크기·선택 상태가 있는 호스팅 파일 목록입니다.
실행 예제 · 규칙 · 코드 backup-list백업 목록·복원 확인
백업 상태·시점·크기와 덮어쓰기 위험을 설명합니다.
실행 예제 · 규칙 · 코드 settings-panel설정 그룹·변경 저장
저장형 설정에서 저장된 값과 미저장 초안을 구분합니다.
실행 예제 · 규칙 · 코드 permission-matrix권한 표·역할별 행동
역할별 허용·불가를 이해할 수 있게 보여주는 권한 표입니다.
실행 예제 · 규칙 · 코드 invoice-summary청구 요약·금액 구성
기본액·할인·세금·총액·주기를 나눠 보여주는 설명용 요약입니다.
실행 예제 · 규칙 · 코드 activity-log활동 기록·결과 필터
행동·수행자·시각·처리 결과를 분리한 작업 이력입니다.
실행 예제 · 규칙 · 코드 connection-details접속 정보·SFTP 안내
호스트·포트·사용자·프로토콜과 복사 가능한 연결 예제입니다.
실행 예제 · 규칙 · 코드