@hawk-ui/input-group

Installation

#### To install a component run
$ npm install @hawk-ui/input-group --save

#### Please import CSS styles via
``scss noeditor
@import '/path__to__node_modules/@hawk-ui/input-group/dist/index.min.css
`

Usage


#### Addon Left Placement
Demo
`js static
import InputGroup from '@hawk-ui/input-group';
`
`js
initialState = {
value: 'Hello World',
};

addon="Text"
addonPlacement="left"
type="text"
value={state.value}
placeholder="Please enter value"
onChange={(event) => {
setState({
value: event.target.value,
});
}}
label="Username"
description="This is a input group field"
/>
`


#### Addon Right Placement
Demo
`js static
import InputGroup from '@hawk-ui/input-group';
`
`js
addon="0.00"
addonPlacement="right"
/>
`


#### Disabled
Demo
`js
initialState = {
value: 'Hello World',
};

addon="Text"
addonPlacement="left"
type="text"
value={state.value}
isDisabled
placeholder="Please enter value"
onChange={(event) => {
setState({
value: event.target.value,
});
}}
/>
`


#### Addon Medium Placement
Demo
`js static
import InputGroup from '@hawk-ui/input-group';
`
`js
addon="Text"
addonSize="medium"
/>
`


#### Addon Large Placement
Demo
`js static
import InputGroup from '@hawk-ui/input-group';
`
`js
addon="Text"
addonSize="large"
/>
`


#### Addon Icon
Demo
`js static
import InputGroup from '@hawk-ui/input-group';
`
`js
addon="fa fa-at"
isAddonIcon
/>
`


#### Addon Element
Demo
`js static
import InputGroup from '@hawk-ui/input-group';
`
`js
initialState = {
fruits: [
{ key: 1, label: '', value: '1' },
],
};

addon={
options={state.fruits}
/>
}
/>
``