Components

Sectile 컴포넌트는 이동, 선택, 입력, 펼침처럼 제품에서 반복되는 동작을 일관된 상태 규칙으로 구성합니다. 각 컴포넌트는 사용하는 렌더러와 시각 체계에 맞춰 조합할 수 있습니다.

컴포넌트 찾기

입력과 편집

7

• Color Picker입력과 편집
• Editable입력과 편집
• Number Field입력과 편집
• Pin Input입력과 편집
• Quantity Field입력과 편집
• Tags Input입력과 편집
• Text입력과 편집

선택과 토글

12

• Checkbox선택 상태
• Checkbox Group목록 선택
• Radio Group목록 선택
• Select목록 선택
• Combobox모음과 탐색
• Listbox목록 선택
• Cascade List계층 선택
• Cascade Select계층 선택
• Rating목록 선택
• Switch선택 상태
• Toggle Button선택 상태
• Toggle Group목록 선택

날짜와 시간

16

• Calendar날짜와 시간
• Date Field입력과 편집
• Date Picker날짜와 시간
• Date Range Field입력과 편집
• Date Range Picker날짜와 시간
• Range Calendar날짜와 시간
• Time Field입력과 편집
• Time Range Field입력과 편집
• Month Picker날짜와 시간
• Month Range Picker날짜와 시간
• Year Picker날짜와 시간
• Year Range Picker날짜와 시간
• Date Time Field입력과 편집
• Date Time Picker날짜와 시간
• Date Time Range Picker날짜와 시간
• Timer범위와 수치

범위와 배치

7

• Meter범위와 수치
• Meter Group범위와 수치
• Progress범위와 수치
• Multi Thumb Slider범위와 수치
• Slider범위와 수치
• Spin Button범위와 수치
• Window Splitter범위와 수치

데이터와 모음

4

• Feed모음과 탐색
• Grid모음과 탐색
• Tree Grid모음과 탐색
• Tree View모음과 탐색

메뉴와 작업

4

• Menu메뉴
• Menu Button메뉴
• Menubar메뉴
• Toolbar작업 모음

오버레이와 피드백

6

• Alert Dialog떠 있는 영역
• Dialog떠 있는 영역
• Drawer떠 있는 영역
• Popover떠 있는 영역
• Tooltip떠 있는 영역
• Toast알림과 피드백

이동과 펼침

7

• Navigation Menu이동
• Pagination페이지 이동
• Tabs목록 선택
• Stepper목록 선택
• Carousel모음과 탐색
• Accordion펼침과 접힘
• Disclosure펼침과 접힘

각 페이지의 상단 예시는 가장 단순한 사용법만 보여줍니다. 아래로 내려가면 상태 관리 방식, 비활성 상태, 키보드 동작과 활용 사례를 개념별로 확인할 수 있습니다.