English
VietnameseArk UI v5 + Tailwind CSS v4@ark-ui/react/number-input
Ark Number Input
Thành phần Number Input thế hệ mới chuyển đổi hoàn toàn sang kiến trúc Zag machine của Ark UI. Cung cấp compound anatomy linh hoạt, định dạng số/tiền tệ tự động, tương tác scrubber con trỏ ảo, bố cục nút tăng giảm ngang/dọc, và tương thích ngược với Form Field.
Sự kiện gần nhất:Chưa có event
Controlled & Layout Stepper
Điều khiển giá trị hai chiều, hỗ trợ chuyển đổi linh hoạt giữa layout nút tăng giảm dọc hoặc ngang.
Kiểu Stepper:
Giá trị số
4
Trạng thái
Số lượng tiêu chuẩn
Compound Components Anatomy
Xây dựng giao diện tùy biến bằng các component giải phẫu: ArkNumberInput.Root, Label, Control, Input, Triggers, Scrubber.
Giá trị compound
10 slots
Định dạng tiền tệ & Số thực
formatOptions truyền trực tiếp vào Intl.NumberFormatOptions bên trong Zag machine.
Kết quả format USD
$1,450.75
Tiền tố (Prefix) & Hậu tố (Suffix)
Affix gắn trực tiếp bên trong thanh control, kết hợp mượt mà với locale formatting.
Phí vận chuyển rút gọn
35 N VND
Giới hạn Min, Max & Báo lỗi
allowOverflow cho phép tạm thời nhập ngoài biên, onValueInvalid thông báo chính xác lý do rangeUnderflow / rangeOverflow.
Điểm đánh giá
8
Trạng thái kiểm tra
Chưa có lỗi min/max
Cuộn chuột (Mouse Wheel)
allowMouseWheel hỗ trợ tăng giảm giá trị bằng con lăn chuột, kết hợp phím Shift (largeStep) và Alt (smallStep).
Giá trị cuộn
25
Tương tác Scrubber chuột
Kéo chuột ngang trên biểu tượng scrubber để tăng giảm giá trị tương tự như công cụ thiết kế chuyên nghiệp.
Giá trị scrubber
48
Ma trận kích thước & Biến thể
Bốn kích cỡ chuẩn xs, sm, md, lg và 3 biến thể giao diện: default, bordered, subtle.
Tích hợp Remix Hook Form & Validation
ArkNumberInputField / InputNumberField hoạt động trơn tru với RemixFormProvider và React Hook Form Controller.