Password
import { Input } from "zmp-ui";
const { Password } = Input;
Dùng để nhập mật khẩu
Ví dụ
Bảng thuộc tính
InputProps
| Property | Type | Required | Description |
|---|---|---|---|
| value | InputHTMLAttributes['value'] | No | Giá trị của input. Cần được sử dụng cùng với `onChange` để cập nhật lại giá trị. |
| onChange | InputHTMLAttributes['onChange'] | No | Callback được gọi khi giá trị của input thay đổi. Cần phải cập nhật lại giá trị của `value` nếu được truyền vào. |
| type | InputType | No | Loại input. |
| status | InputStatus | No | Trạng thái hợp lệ của input. Nếu là `error`, input sẽ có màu cảnh báo kèm theo `errorText`, ngược lại input sẽ có màu trung hoà kèm theo `helperText`. |
| onPressEnter | KeyboardEventHandler | No | Callback được gọi khi người dùng nhấn Enter hoặc xuống dòng trong input. |
| size | InputSize | No | Kích thước của input. Mang một trong các giá trị `small`, `medium` hoặc `large`. (default: 'medium') |
PasswordProps
| Property | Type | Required | Description |
|---|---|---|---|
| visibilityToggle | boolean | No | Khi được bật, một biểu tượng hình con mắt (Visibility Toggle) sẽ được hiển thị ở bên phải input để cho phép người dùng hiển thị hoặc che đi mật khẩu họ đã nhập khi nhấn vào. (default: false) |
| iconRender | (visible: boolean) => React.ReactNode | No | Custom icon để hiển thị trên Visibility Toggle thay cho icon mặc định. Cần được sử dụng cùng với `visibilityToggle`. Giá trị được truyền vào dưới dạng một function, với tham số đầu tiên là một biến boolean thể hiện trạng thái hiển thị hoặc bị che của mật khẩu và trả về một ReactNode. |