@hawk-ui/input-group NPM | npm.io

4.4.1 • Published 1 year ago

Install

Weekly downloads

515

License

MIT

Repository

Last release

1 year ago

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.css

Usage

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}
    />
  }
/>

input group react react component react input group hawk hawk-ui ui

@hawk-ui/button @hawk-ui/input @hawk-ui/label classnames lodash prop-types

@everything-registry/sub-chunk-388 @hawk-ui/form @hawk-ui/color-picker

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago