hawk-ui: Input Group Component
npm install @hawk-ui/input-group
#### 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
#### Addon Left Placement
Demo
`js static`
import InputGroup from '@hawk-ui/input-group';`js
initialState = {
value: 'Hello World',
};
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`
addonPlacement="right"
/>
#### Disabled
Demo
`js
initialState = {
value: 'Hello World',
};
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`
addonSize="medium"
/>
#### Addon Large Placement
Demo
`js static`
import InputGroup from '@hawk-ui/input-group';`js`
addonSize="large"
/>
#### Addon Icon
Demo
`js static`
import InputGroup from '@hawk-ui/input-group';`js`
isAddonIcon
/>
#### Addon Element
Demo
`js static`
import InputGroup from '@hawk-ui/input-group';`js
initialState = {
fruits: [
{ key: 1, label: '', value: '1' },
],
};
/>
}
/>
``