Installation

To install a component run

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

Please import CSS styles via

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

Usage

Addon Left Placement

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

initialState = {
  value: 'Hello World',
};

<InputGroup
  addon={<span>Text</span>}
  label="Username"
  inputType="text"
  inputValue={state.value}
  inputPlaceholder="Please enter value"
  onChange={(event) => {
    setState({
      value: event.target.value,
    });
  }}
  description="This is a input group field"
/>

Addon Right Placement

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

<InputGroup
  addon="0.00"
  addonPlacement="right"
/>

Disabled

initialState = {
  value: 'Hello World',
};

<InputGroup
  addon={<span>Text</span>}
  inputType="text"
  inputValue={state.value}
  inputPlaceholder="Please enter value"
  isDisabled
  onChange={(event) => {
    setState({
      value: event.target.value,
    });
  }}
/>

Addon Medium Placement

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

<InputGroup
  addon={<span>Text</span>}
  addonSize="medium"
/>

Addon Large Placement

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

<InputGroup
  addon={<span>Text</span>}
  addonSize="large"
/>

Addon Icon

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

<InputGroup
  addon={<i className="fa fa-at" />}
/>