COMPONENT DIRECTORY
필요한 인터페이스 부품만 source로.
폼, 오버레이, 탐색, 데이터 표시와 피드백을 같은 표면·상태 규칙으로 조합합니다.
56개
TemplatessourceButton
raised, pressed, primary 상태를 갖는 기본 행동 컨트롤.
sourceDialog
포커스를 안전하게 가두고 원래 trigger로 돌려보내는 모달 표면.
sourceDropdown Menu
행동, 선택, submenu를 키보드로 탐색하는 맥락 메뉴.
sourceAlert Dialog
되돌릴 수 없는 작업을 명시적으로 확인하는 대화상자.
sourcePopover
버튼 옆에서 맥락을 유지하는 작은 설정 패널.
sourceHover Card
링크의 목적지를 보조적으로 설명하는 미리보기 카드.
sourceSheet
화면 가장자리에서 여는 스크롤 가능한 작업 패널.
sourceContext Menu
포인터 위치에서 열리는 작업 메뉴와 체크·라디오·하위 메뉴.
sourceDrawer
스와이프로 닫을 수 있는 하단·측면 작업 패널.
sourceCheckbox
boolean과 indeterminate 상태를 지원하는 네이티브 체크박스.
sourceInput
focus와 validation 상태가 선명한 inset 단일 행 입력.
sourceInput Group
입력, addon, action을 하나의 inset 표면으로 묶는 조합형 필드.
sourceLabel
폼 control의 이름과 클릭 영역을 연결하는 native label.
sourceRadio Group
하나의 값을 선택하는 native radio input 그룹.
sourceSelect
브라우저 접근성을 보존한 native select 표면.
sourceSlider
하나 또는 여러 값을 가로·세로 track에서 조정하는 범위 컨트롤.
sourceSwitch
즉시 적용되는 켜짐·꺼짐 설정을 눌린 track으로 표현하는 control.
sourceTextarea
여러 줄 텍스트를 입력하는 resizable inset field.
sourceToggle
눌린 선택 상태가 유지되는 독립 토글 버튼.
sourceToggle Group
단일 또는 복수 선택을 묶는 키보드 탐색 토글 그룹.
sourceField
라벨·설명·오류를 입력과 연결하는 검증 단위.
sourceFieldset
관련 입력에 공통 제목과 비활성 상태를 제공하는 그룹.
sourceForm
필드 검증과 제출 오류를 함께 다루는 네이티브 폼.
sourceNumber Field
범위·간격·지역별 표시를 지원하는 수량 입력.
sourceCombobox
필터링·빈 결과·키보드 선택을 지원하는 검색형 입력.
sourceCalendar
단일 날짜와 기간을 선택하는 뉴모피즘 달력.
sourceDate Picker
팝오버에서 날짜를 고르고 지우는 날짜 입력.
sourceInput OTP
한 개의 실제 입력과 여러 시각적 slot을 결합한 인증 코드 입력.
sourceAccordion
여러 섹션을 한 번에 하나씩 또는 동시에 펼치는 disclosure group.
sourceBreadcrumb
현재 페이지까지의 경로를 의미 있는 순서 목록으로 표시합니다.
sourcePagination
현재 페이지와 이전·다음 이동을 명시하는 raised 링크 모음.
sourceTabs
같은 맥락 안의 panel을 키보드로 전환하는 tab interface.
sourceTooltip
hover와 keyboard focus에 짧은 보조 설명을 제공하는 popup.
sourceCollapsible
추가 설정 한 묶음을 펼치거나 접는 컨테이너.
sourceToolbar
문서 작업을 한 곳에 묶는 방향키 탐색 도구 모음.
sourceNavigation Menu
링크와 팝업을 결합한 키보드 접근 가능한 사이트 탐색.
sourceMenubar
방향키로 이동하는 애플리케이션 명령 메뉴.
sourceCommand
검색과 키보드 선택을 결합한 명령 팔레트와 빠른 이동 목록.
sourceCarousel
터치·버튼·방향키로 이동하는 순차 콘텐츠 뷰.
sourceResizable
키보드와 포인터로 비율을 조절하는 분할 패널.
sourceSidebar
데스크톱 축소와 모바일 Sheet를 함께 제공하는 애플리케이션 내비게이션.
sourceAlert
중요한 상태와 결과를 raised 표면으로 전달하는 메시지.
sourceAvatar
이미지 로딩 실패에도 fallback을 유지하는 프로필 표면.
sourceBadge
상태와 분류를 짧고 선명하게 표시하는 inline label.
sourceCard
콘텐츠를 raised, soft, inset 또는 flat 깊이로 묶는 표면.
sourceProgress
완료 정도를 inset track과 primary fill로 표시하는 진행 상태.
sourceScroll Area
브라우저의 native scrolling을 유지하는 테마형 overflow 표면.
sourceSeparator
관련 콘텐츠 사이의 경계를 빛과 얇은 그림자로 표현하는 구분선.
sourceSkeleton
로딩될 콘텐츠의 크기와 위치를 미리 보여주는 inset placeholder.
sourceTable
작은 화면에서 가로 스크롤되는 의미 있는 데이터 표.
sourceMeter
알려진 범위 안에서 사용량을 나타내는 측정 막대.
sourceData Table
검색·필터·정렬·선택·페이지 이동을 조합하는 데이터 표.
sourceToast
결과 안내와 실행 취소를 제공하는 알림.
sourceChart
반응형 차트 표면, 툴팁과 정확한 데이터 표.
sourceImage Card
이미지와 설명을 하나의 raised surface로 묶는 콘텐츠 카드.
sourceMarquee
일시 정지와 reduced-motion을 지원하는 반복 정보 스트립.