React용 뉴모피즘 UI

raised, pressed, primary 상태를 갖는 기본 행동 컨트롤.

포커스를 안전하게 가두고 원래 trigger로 돌려보내는 모달 표면.

행동, 선택, submenu를 키보드로 탐색하는 맥락 메뉴.

되돌릴 수 없는 작업을 명시적으로 확인하는 대화상자.

버튼 옆에서 맥락을 유지하는 작은 설정 패널.

링크의 목적지를 보조적으로 설명하는 미리보기 카드.

화면 가장자리에서 여는 스크롤 가능한 작업 패널.

포인터 위치에서 열리는 작업 메뉴와 체크·라디오·하위 메뉴.

스와이프로 닫을 수 있는 하단·측면 작업 패널.

boolean과 indeterminate 상태를 지원하는 네이티브 체크박스.

focus와 validation 상태가 선명한 inset 단일 행 입력.

입력, addon, action을 하나의 inset 표면으로 묶는 조합형 필드.

폼 control의 이름과 클릭 영역을 연결하는 native label.

하나의 값을 선택하는 native radio input 그룹.

브라우저 접근성을 보존한 native select 표면.

하나 또는 여러 값을 가로·세로 track에서 조정하는 범위 컨트롤.

즉시 적용되는 켜짐·꺼짐 설정을 눌린 track으로 표현하는 control.

여러 줄 텍스트를 입력하는 resizable inset field.

눌린 선택 상태가 유지되는 독립 토글 버튼.

단일 또는 복수 선택을 묶는 키보드 탐색 토글 그룹.

라벨·설명·오류를 입력과 연결하는 검증 단위.

관련 입력에 공통 제목과 비활성 상태를 제공하는 그룹.

필드 검증과 제출 오류를 함께 다루는 네이티브 폼.

범위·간격·지역별 표시를 지원하는 수량 입력.

필터링·빈 결과·키보드 선택을 지원하는 검색형 입력.

단일 날짜와 기간을 선택하는 뉴모피즘 달력.

팝오버에서 날짜를 고르고 지우는 날짜 입력.

한 개의 실제 입력과 여러 시각적 slot을 결합한 인증 코드 입력.

여러 섹션을 한 번에 하나씩 또는 동시에 펼치는 disclosure group.

현재 페이지까지의 경로를 의미 있는 순서 목록으로 표시합니다.

현재 페이지와 이전·다음 이동을 명시하는 raised 링크 모음.

같은 맥락 안의 panel을 키보드로 전환하는 tab interface.

hover와 keyboard focus에 짧은 보조 설명을 제공하는 popup.

추가 설정 한 묶음을 펼치거나 접는 컨테이너.

문서 작업을 한 곳에 묶는 방향키 탐색 도구 모음.

링크와 팝업을 결합한 키보드 접근 가능한 사이트 탐색.

방향키로 이동하는 애플리케이션 명령 메뉴.

검색과 키보드 선택을 결합한 명령 팔레트와 빠른 이동 목록.

터치·버튼·방향키로 이동하는 순차 콘텐츠 뷰.

키보드와 포인터로 비율을 조절하는 분할 패널.

데스크톱 축소와 모바일 Sheet를 함께 제공하는 애플리케이션 내비게이션.

중요한 상태와 결과를 raised 표면으로 전달하는 메시지.

이미지 로딩 실패에도 fallback을 유지하는 프로필 표면.

상태와 분류를 짧고 선명하게 표시하는 inline label.

콘텐츠를 raised, soft, inset 또는 flat 표면으로 묶고 accent 면으로 강조합니다.

완료 정도를 inset track과 primary fill로 표시하는 진행 상태.

브라우저의 native scrolling을 유지하는 테마형 overflow 표면.

관련 콘텐츠 사이의 경계를 빛과 얇은 그림자로 표현하는 구분선.

로딩될 콘텐츠의 크기와 위치를 미리 보여주는 inset placeholder.

작은 화면에서 가로 스크롤되는 의미 있는 데이터 표.

알려진 범위 안에서 사용량을 나타내는 측정 막대.

검색·필터·정렬·선택·페이지 이동을 조합하는 데이터 표.

결과 안내와 실행 취소를 제공하는 알림.

반응형 차트 표면, 툴팁과 정확한 데이터 표.

이미지와 설명을 하나의 raised surface로 묶는 콘텐츠 카드.

일시 정지와 reduced-motion을 지원하는 반복 정보 스트립.