Input

Properties

Input

Name	Type	Default	Description
label	string		Label hiển thị phía trên của field input.
status	string		Trạng thái của field input. Nhận các giá trị: success | error
helperText	string		Helper text hiển thị phía dưới của field input.
errorText	string		Text hiển thị khi status của field input là error
clearable	boolean | Object		Nếu cho phép sẽ hiển thị clear icon.
maxLength	number		Giới hạn độ dài tối đa được phép nhập

Input.Password

Hỗ trợ tất cả các props của component Input

Name	Type	Default	Description
visibilityToggle	boolean		Hiển thị icon hiện/ẩn password

import React from "react";
import { Page, Input } from "zmp-ui";

function HomePage(props){
    return (
        <Page>
          <Input.Password label="Label" helperText="Helper text" visibilityToggle />
        </Page>
    );
}

Input.Search

Hỗ trợ tất cả các props của component Input

Name	Type	Default	Description
loading	boolean		Hiển thị icon loading khi trạng thái đang search
onSearch	function		Sự kiện khi người dùng search. Nhận về giá trị được nhập

import React from "react";
import { Page, Input } from "zmp-ui";

function HomePage(props){
    return (
      <Page>
        <Input.Search
          label="Label"
          helperText="Helper text"
          loading
          onSearch={(text) => console.log(text)}
        />
      </Page>
    );
}

Input.TextArea

Hỗ trợ tất cả các props của component Input

Name	Type	Default	Description
autoSize	boolean		Chiều dài của field sẽ theo chiều dài của text
showCount	boolean		Hiển thị số lượng ký tự

import React from "react";
import { Page, Input } from "zmp-ui";

function HomePage(props){
    return (
        <Page>
          <Input.TextArea label="Label" helperText="Helper text" showCount />
        </Page>
    );
}

Input.OTP

Hỗ trợ tất cả các props của component Input

Name	Type	Default	Description
otpLength	number	4	Số lượng ô input cần hiển thị
show	boolean		Nếu là false thì hiển thị ký tự *

import React from "react";
import { Page, Input } from "zmp-ui";

function HomePage(props){
    return (
        <Page>
          <Input.OTP show otpLength={6} />
        </Page>
    );
}

Example

import React from "react";
import { Page, Input } from "zmp-ui";

function HomePage(props){
    return (
        <Page>
          <Input label="Label" helperText="Helper text" />
        </Page>
    );
}