Installation

To install a component run

$ npm install @wallnit-ui/input --save

Please import CSS styles via

@import '/path__to__node_modules/@wallnit-ui/input/dist/index.min.css

Usage

Without Label and Without Required:

Demo

import { Input } from '@wallnit-ui/input';

initialState = {
  value: '',
};

<Input
  type="text"
  value={state.value}
  onChange={(event) => {
    setState({
      value: event.target.value,
    });
  }}
  onEnter={(value) => {
    alert(value);
  }}
  placeholder="Enter Username"
  description="This is user input"
/>

With Copy

Demo

import { Input } from '@wallnit-ui/input';

initialState = {
  value: '',
};

<Input
  type="text"
  value={state.value}
  id="copy"
  isCopyable
  onChange={(event) => {
    setState({
      value: event.target.value,
    });
  }}
  onEnter={(value) => {
    alert(value);
  }}
  placeholder="Enter Username"
/>

With Password Visible

Demo

import { Input } from '@wallnit-ui/input';

initialState = {
  value: '',
};

<Input
  type="password"
  value={state.value}
  togglePasswordVisibility
  onChange={(event) => {
    setState({
      value: event.target.value,
    });
  }}
  onEnter={(value) => {
    alert(value);
  }}
  placeholder="Enter Username"
/>

With Label and With Required

Demo

import { Input } from '@wallnit-ui/input';

initialState = {
  value: '',
};

<Input
  type="text"
  onChange={(event) => {
    setState({
      value: event.target.value,
    });
  }}
  onEnter={(value) => {
    alert(value);
  }}
  placeholder="Enter Username"
  label="Username"
  isRequired
  isErrorVisible
  errorMessage="This field is a compulsory field."
/>

Textarea With Label

Demo

import { Input } from '@wallnit-ui/input';

initialState = {
  value: '',
};

<Input
  type="text"
  isTextarea
  htmlAttributes={{
    rows: '3',
    cols: '30',
  }}
  onChange={(event) => {
    setState({
      value: event.target.value,
    });
  }}
  onEnter={(value) => {
    alert(value);
  }}
  placeholder="Enter Address"
  label="Address"
/>