Thư viện phần tử giao diện

Vùng điều hướng nhỏ gọn ở cạnh dưới để chuyển giữa một số điểm đến chính.

Chuỗi bước có thứ tự thể hiện tiến trình của việc gồm nhiều bước.

Mục lục có liên kết hiện tại đi theo tiêu đề đang xem.

Điều khiển chuyển giữa các trang riêng của một tập kết quả.

Đầu trang có thể chứa nhận diện và tiện ích. Thanh điều hướng là nhóm liên kết đến các điểm đến.

Nút nhỏ gọn mở bảng điều hướng, thường dùng trên màn hình hẹp.

Nút mở trình đơn gom các hành động phụ không xuất hiện trong giao diện chính.

Bộ tìm kiếm hành động và điểm đến, thường mở bằng nút hoặc phím tắt.

Nhóm nhãn ngang hàng dùng để chuyển một vùng nội dung chung tại một thời điểm.

Dãy liên kết đến các cấp cha để xác định vị trí trang trong hệ thống phân cấp.

Tập bản ghi hai chiều được sắp theo hàng và cột có nhãn.

Chuỗi sự kiện có ngày tháng, được sắp theo thời gian.

Dấu hiệu nhỏ gọn thể hiện sự hiện diện của một người hoặc trạng thái hiện tại của một mục.

Vùng chứa một tin nhắn trong cuộc trò chuyện.

Cách hiển thị nhỏ gọn những người cùng tham gia một mục hoặc hoạt động.

Vùng chứa nội dung với các phần hình ảnh, đầu, thân, thông tin bổ sung và cuối riêng biệt.

Quy tắc rút gọn văn bản còn một dòng hoặc số dòng nhất định, có dấu báo phần bị lược bỏ.

Nhóm phần có nhãn, cho phép mở hoặc thu gọn nội dung.

Nhãn trạng thái thể hiện trạng thái hoặc số lượng ngắn gọn. Thẻ lựa chọn là giá trị hoặc bộ lọc có thể tương tác. Hình viên thuốc là kiểu dáng bo tròn. Thẻ nội dung dùng để phân loại nội dung.

Vùng giải thích vì sao chưa có nội dung mong đợi và người dùng có thể làm gì tiếp theo.

Điều khiển cho phép chọn nhiều giá trị từ một tập xác định.

Biểu mẫu thu thập thông tin đăng nhập hoặc lựa chọn nhà cung cấp danh tính để bắt đầu phiên tài khoản.

Điều khiển nhập một ngày hoặc chọn ngày hay khoảng ngày từ lịch.

Tay nắm nhỏ ở cạnh hoặc góc để kéo thay đổi kích thước điều khiển.

Trường nhập đơn với nhãn cố định, chữ gợi ý tùy chọn, hướng dẫn và trạng thái kiểm tra.

Tương tác kéo để chuyển một mục sang vị trí hoặc điểm đến khác.

Trường cho phép nhập hoặc chỉ chọn, đi kèm bảng giá trị hoặc gợi ý.

Dấu hiệu trực quan xác định mục đang có tiêu điểm bàn phím, thường dùng trạng thái :focus-visible.

Công tắc bật hoặc tắt một thiết lập. Ô chọn cho phép chọn các lựa chọn độc lập. Nhóm nút chọn cho phép chọn một mục trong tập.

Dãy lựa chọn liền nhau, chỉ chọn một chế độ hoặc cách xem tại một thời điểm.

Ba vị trí thông báo có vai trò khác nhau. Cảnh báo trong trang thuộc về việc hoặc trường. Khối thông tin giải thích nội dung gần đó. Dải thông báo trải ngang trang hoặc vùng.

Lớp nổi hiển thị hình ảnh hoặc nội dung đa phương tiện phóng lớn trên trang.

Thanh hoặc vòng tiến trình thể hiện mức hoàn thành đo được. Biểu tượng chờ thể hiện quá trình chưa biết mức hoàn thành.

Thông báo ngắn không chặn thao tác, dùng để xác nhận hoặc báo kết quả hành động vừa thực hiện.

Hộp thoại chặn trang để tập trung vào một việc. Ngăn bên là bảng mở từ cạnh bên. Bảng nổi mở từ một cạnh, thường trên thiết bị di động.

Bảng nổi chứa nội dung bổ sung liên quan. Trình đơn thả xuống đưa ra hành động hoặc lựa chọn. Chú giải cung cấp hỗ trợ ngắn không tương tác.

Lớp phía sau bảng nổi để tách và giảm sự chú ý vào trang bên dưới.

Khung chờ giữ chỗ theo hình dạng nội dung sắp có. Biểu tượng chờ thể hiện quá trình chưa biết hình dạng kết quả.

Bản xem trước xuất hiện gần mục được nhắc tới khi trỏ chuột hoặc đặt tiêu điểm vào mục đó.

Hiệu ứng cuộn với các lớp hình ảnh di chuyển khác tốc độ để tạo chiều sâu.

Vùng xem một hoặc nhiều mục trong một chuỗi lớn hơn, có nút chuyển mục đang xem.

Lưới nội dung liên quan dùng các ô khác kích thước trong cùng một bố cục thẳng hàng.

Bố cục nhiều cột xếp các mục khác chiều cao theo từng cột dọc.

Đường cong chuyển động điều khiển cách hoạt ảnh tăng và giảm tốc theo thời gian.

Chuyển động mô phỏng vật lý có thể vượt đích hoặc ổn định theo độ cứng và lực cản.

Hiệu ứng thay thế ký tự trong thời gian ngắn rồi trả về văn bản hoàn chỉnh.

Dải nội dung lặp lại hoặc nối tiếp di chuyển liên tục.

Phần tử HTML <hr> đánh dấu chuyển chủ đề. role=separator đánh dấu ranh giới giữa nhóm điều khiển. Đường viền CSS chỉ dùng để hiển thị.

Sticky giữ phần tử trong vùng chứa khi cuộn. Fixed đưa phần tử ra khỏi luồng thường và gắn với màn hình hoặc vùng chứa có biến đổi.

Khung ứng dụng gốc gồm tiêu đề, thanh công cụ, nội dung, cạnh thay đổi kích thước và nút điều khiển cửa sổ của hệ thống.

Không gian làm việc gồm danh sách mục bên cạnh nội dung của mục đang chọn.

Vùng xem nội dung lớn hơn diện tích sẵn có, có hỗ trợ cuộn.

Trình duyệt phân cấp mở cấp mục tiếp theo trong một cột liền kề mới.

Bảng theo ngữ cảnh để xem hoặc sửa thuộc tính của tài liệu, mục đang chọn hoặc công cụ.

Danh sách nguồn cố định để chuyển giữa các vị trí, bộ sưu tập hoặc bộ lọc liên quan trong cửa sổ.

Dãy hành động của cửa sổ hòa vào vùng tiêu đề.

Nút đóng, thu nhỏ và phóng lớn gốc của cửa sổ ứng dụng macOS.

Hành động chính gắn với nút mở trình đơn riêng cho các lựa chọn liên quan.

Vùng hệ điều hành gom lệnh toàn ứng dụng vào các trình đơn cố định.

Trình đơn lệnh liên quan đến mục hoặc vị trí đang chọn, mở ngay trong ngữ cảnh đó.

Dấu chỉ báo của hệ thống cho biết nội dung liên quan đang mở hay thu gọn.

Bảng tạm thời gắn với điều khiển hoặc mục đã mở nó.

Nút chọn giá trị mở danh sách lựa chọn. Nút mở hành động mở các lệnh. Ô kết hợp cho phép nhập chữ cùng gợi ý hoặc lựa chọn.

Nhóm lựa chọn liền nhau để chọn một chế độ hoặc cách xem.

Mục trạng thái của ứng dụng macOS trên thanh trình đơn, có biểu tượng hoặc giá trị nhỏ gọn và trình đơn tùy chọn.

Dấu vị trí hệ thống cho biết ký tự gõ tiếp theo sẽ xuất hiện ở đâu trong chữ có thể sửa.

Hình con trỏ thay đổi để nêu kiểu tương tác có thể dùng tại vị trí hiện tại.

Điều khiển liên tục để chỉnh âm lượng trong một khoảng giới hạn.

Điều khiển màu gồm hai phần, hiển thị màu hiện tại, mở bảng màu nhanh và cho phép mở bảng màu đầy đủ.

Trường nhập chuyên dùng để tìm kiếm, có tìm, xóa và đôi khi có truy vấn gần đây.

Trường nhập chuyển các giá trị đã nhận diện thành từng mục riêng có thể xóa.

Hình biểu diễn nhỏ gọn cho số đo, dung lượng hoặc đánh giá có giới hạn.

Cách thể hiện tiêu điểm của hệ thống để xác định điều khiển nhận bàn phím.

Cặp nút nhỏ gọn để tăng hoặc giảm giá trị số theo bước cố định.

Cảnh báo hệ thống xác nhận thao tác có ảnh hưởng lớn trước khi xóa vĩnh viễn một nhóm mục đã bỏ.

Bảng lưu tệp của hệ thống để đặt tên, chọn nơi lưu và định dạng.

Số lượng hoặc trạng thái ngắn hiển thị trên biểu tượng ứng dụng trong Dock của macOS.

Bảng công cụ nổi để chọn màu hoặc chỉnh sửa trong khi vẫn giữ tài liệu hiện tại trong ngữ cảnh.

Bảng xác nhận gắn với tài liệu cho thao tác tác động đến tài liệu hoặc cửa sổ hiện tại.

Bề mặt trong mờ của hệ thống hòa với nội dung phía sau nhưng vẫn giữ các điều khiển phía trước dễ đọc.