VNR Design System

Input

Text input fields for forms. Includes Input, Password, TextArea, Search, InputNumber, and OTP.

Khi nào sử dụng

Thu thập dữ liệu

Nhận thông tin người dùng trong biểu mẫu đăng ký hoặc cài đặt.

Tìm kiếm

Ô tìm kiếm với icon kính lúp và nút xóa nhanh.

Nhập có tiền/hậu tố

Kết hợp addon như đơn vị tiền tệ, URL prefix hoặc icon.

Hướng dẫn

Do
  • Luôn đặt label hoặc placeholder rõ ràng
  • Hiển thị thông báo lỗi ngay dưới ô nhập
  • Dùng thuộc tính type phù hợp (email, tel, url)
Don't
  • Dùng placeholder thay thế label
  • Giới hạn độ dài mà không thông báo cho người dùng
  • Đặt ô nhập quá ngắn so với nội dung cần nhập

Basic

https://.com

Sizes

States

Prefix, Suffix & Addon

$kg@.comhttp://

Character Count

0 / 200 / 100

Password

Search

TextArea

InputNumber

$
%
+
units

OTP Input