Installation
To install a component run
$ npm install @hawk-ui/input-group --save
Please import CSS styles via
@import '/path__to__node_modules/@hawk-ui/input-group/dist/index.min.cssUsage
Addon Left Placement
import InputGroup from '@hawk-ui/input-group';initialState = {
value: 'Hello World',
};
<InputGroup
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
import InputGroup from '@hawk-ui/input-group';<InputGroup
addon="0.00"
addonPlacement="right"
/>Disabled
initialState = {
value: 'Hello World',
};
<InputGroup
addon="Text"
addonPlacement="left"
type="text"
value={state.value}
isDisabled
placeholder="Please enter value"
onChange={(event) => {
setState({
value: event.target.value,
});
}}
/>Addon Medium Placement
import InputGroup from '@hawk-ui/input-group';<InputGroup
addon="Text"
addonSize="medium"
/>Addon Large Placement
import InputGroup from '@hawk-ui/input-group';<InputGroup
addon="Text"
addonSize="large"
/>Addon Icon
import InputGroup from '@hawk-ui/input-group';<InputGroup
addon="fa fa-at"
isAddonIcon
/>Addon Element
import InputGroup from '@hawk-ui/input-group';initialState = {
fruits: [
{ key: 1, label: '', value: '1' },
],
};
<InputGroup
addon={
<Checkbox
options={state.fruits}
/>
}
/>