### Basic Input:

```js
initialState = {
  value: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit!',
};

<Input
  value={state.value}
  onChange={(value) => setState({ value })}
  placeholder="Input placeholder"
  hint="Hint message"
  clearable
/>;
```

### Intent:

```js
initialState = {
  value: 'Lorem ipsum dolor sit!',
};

<>
  <Input
    value={state.value}
    onChange={(value) => setState({ value })}
    placeholder="Input placeholder"
    hint="Hint message"
    clearable
  />
  <br />
  <Input
    value={state.value}
    onChange={(value) => setState({ value })}
    placeholder="Input placeholder"
    hint="Hint message"
    clearable
    intent="danger"
  />
  <br />
  <Input
    value={state.value}
    onChange={(value) => setState({ value })}
    placeholder="Input placeholder"
    hint="Hint message"
    clearable
    intent="success"
  />
  <br />
  <Input
    value={state.value}
    onChange={(value) => setState({ value })}
    placeholder="Input placeholder"
    hint="Hint message"
    clearable
    intent="warning"
  />
  <br />
  <Input
    value={state.value}
    onChange={(value) => setState({ value })}
    placeholder="Input placeholder"
    hint="Hint message"
    clearable
    intent="info"
  />
  <br />
  <Input
    value={state.value}
    onChange={(value) => setState({ value })}
    placeholder="Input placeholder"
    clearable
    intent="info"
  />
</>;
```

### Prefix

```js
initialState = {
  value: 'dlg.im/en',
};

<Input
  value={state.value}
  onChange={(value) => setState({ value })}
  placeholder="Input with prefix"
  prefix="https://"
  clearable
/>;
```

### Textarea

```js
initialState = {
  value: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit!',
};

<Input
  value={state.value}
  onChange={(value) => setState({ value })}
  placeholder="Input placeholder"
  hint="Hint message"
  clearable
  rows={4}
  type="textarea"
/>;
```