SegmentedControl
Mẫu chuẩnMột hàng lựa chọn. Mỗi mục rộng theo chữ. Khối nền trượt bằng cách đổi cả bề rộng và vị trí. Gạch dưới chỉ phủ mục đang chọn, cách khối nền 4px, và chạy theo.
Playground
Bấm các mục dài ngắn khác nhau. Khối nền đổi bề rộng trong lúc trượt.
Khi nào sử dụng
Nên dùng
Một lựa chọn giữa vài nhãn dài ngắn khác nhau, trên cùng một bề mặt.
Tránh dùng
Cột đều nhau hoặc viên thuốc thì dùng ModeControl. Gạch dưới thì dùng Tabs. Bật tắt thì dùng Switch.
Anatomy
role="radiogroup". Mỗi mục là role="radio" và rộng theo chữ. Khối nền chép vị trí và bề rộng của mục đang chọn, rồi chuyển transform cùng width. Gạch là viên thuốc 2px, thụt mỗi bên bằng radius control để khớp cạnh đáy phẳng của nền bo góc, và cách đáy nền 4px.
Design tokens
Không có token mới. Gạch active là viên thuốc, màu primary, dày 2px, thụt mỗi bên --nf-foundation-radius-control cho khớp cạnh đáy của nền bo góc, cách nền 4px và trượt cùng khối đó. Size sm dùng chữ UI 0.875rem, không dùng caption 0.75rem.
API & triển khai
| Prop | Mặc định | Quy ước |
|---|---|---|
| options | — | Mảng { value, label }. Bắt buộc. |
| value | — | value đang chọn. |
| onValueChange | — | Gọi với value mới. |
| size | md | sm / md / lg, cùng bậc cao với Button. |
| disabled | false | Khoá cả nhóm. |
| options[].disabled | false | Khoá một mục: vẫn hiện, dùng aria-disabled nên còn focus được, mũi tên bỏ qua. |
| options[].disabledReason | undefined | Lý do mục bị khoá: hiện trong tooltip và đọc như mô tả của mục. |
| aria-label | — | Tên của cả nhóm. |
Accessibility
Một điểm dừng Tab, trên mục đang chọn. Mũi tên, Home và End chuyển lựa chọn và focus.