FormattedInput

FormattedInput định dạng số điện thoại, số thẻ và số tiền ngay khi gõ, vẫn giữ vị trí con trỏ.

format="phone" chèn khoảng trắng, ngoặc, gạch nối theo mask (# là một chữ số; mặc định theo vùng của locale: en-US "(###) ###-####", vi-VN "#### ### ###"). format="card" nhóm 4-4-4-4, American Express 4-6-5. format="currency" định dạng bằng Intl theo locale và currency, giới hạn số chữ số thập phân của đồng tiền và thêm đủ khi rời ô. Gõ, dán hay xoá giữa chừng đều giữ con trỏ đúng chỗ; Backspace ngay sau dấu phân cách xoá chữ số trước nó. value / onValueChange là giá trị thô (chữ số, hoặc số thập phân "1234.5"); có name thì form gửi giá trị thô qua một input ẩn. Nhận mọi prop của Input.

Số điện thoại

Giá trị thô: —

Import

Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.

TSX

// npm install yugen-uiimport { FormattedInput, getPhoneMask, getCardMask, applyMask } from "yugen-ui";

Biến thể

Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.

Số tiền

Thêm đủ phần thập phân khi rời ô

Số tiền bằng yên

Giá trị thô: 1250

Số tiền

Theo locale của YugenProvider; JPY không có phần thập phân.

Số thẻ

American Express nhóm 4-6-5

Số thẻ (Amex)

Số thẻ

inputMode numeric và autoComplete "cc-number" có sẵn.

Số di động

+44

Mask riêng & mã quốc gia

Mã quốc gia đặt ở contentBefore, không nằm trong giá trị.

Gửi form

Với name, FormData chứa giá trị thô, không phải chữ đã định dạng.

Cách dùng

Nên

Lưu và gửi giá trị thô; định dạng chỉ để đọc dễ hơn.
Đặt mã quốc gia ở contentBefore và một mask cố định khi form chỉ nhận số của một nước.
Kiểm tra độ dài / tính hợp lệ (vd. Luhn cho số thẻ) khi gửi form và hiển thị lỗi qua <Field>.

Không nên

Không dùng FormattedInput cho số đếm có tăng giảm — dùng SpinButton.
Không đặt chữ số trong phần cố định của mask; ký tự cố định chỉ là dấu phân cách.

Props

Prop · Kiểu	Mặc định	Mô tả
format"phone" \| "card" \| "currency"	Mặc định: —	Kiểu định dạng.
value / defaultValuestring	Mặc định: —	Giá trị thô: chữ số (phone, card) hoặc số thập phân "1234.5" (currency).
onValueChange(value: string, details: { formatted: string }) => void	Mặc định: —	Gọi khi giá trị thô đổi; details.formatted là chữ đang hiển thị.
maskstring	Mặc định: —	Mask cho phone / card: # là một chữ số. Mặc định theo locale (phone) / loại thẻ (card).
currencystring	Mặc định: "USD"	Mã tiền tệ ISO 4217 cho currency.
localestring	Mặc định: locale của YugenProvider	Locale cho currency và mask phone mặc định.
namestring	Mặc định: —	Tên trường trong form; form gửi giá trị thô qua input ẩn.
label / hint / validationState / validationMessage / size / appearance / contentBefore / contentAfter / rootClassName—	Mặc định: —	Như Input.
refRef<HTMLInputElement>	Mặc định: —	Trỏ tới ô nhập hiển thị.
getPhoneMask(locale) / getCardMask(digits) / applyMask(raw, mask)helper	Mặc định: —	Mask mặc định và hàm điền mask, dùng được ngoài component.