> For the complete documentation index, see [llms.txt](https://apcom.gitbook.io/altrone-ui/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://apcom.gitbook.io/altrone-ui/components/forms/textinput.md).

# TextInput

TextInput is used to enter small amount of text - name, address, email and etc. Do not forget to use `placeholder` or `label` prop of [FormField](/altrone-ui/components/containers/form.md#formfield) to communicate its purpose. 

This component is basic component for [PasswordInput](/altrone-ui/components/forms/passwordinput.md), [NumberInput](/altrone-ui/components/forms/numberinput.md) and [Search](/altrone-ui/components/forms/search.md). These components overrides some properties of TextInput to provide some features for different purposes. 

```tsx
import { TextInput } from 'altrone-ui';

const [value, setValue] = useState('');

return <TextInput 
    value={value} 
    onChange={setValue}
    placeholder="Input something" 
/>
```

## Text Input Islands

Sometimes you want to improve your text field with extra functionality. For this case Altrone provides a great feature for TextInput customisation - TextInput Islands. You can add island to the left and right side of the text input.&#x20;

There are four types of islands:

**Text Island.** This is just a text label. You can use them as hints or as prefixes and suffixes for inputed text. Also, TextInput has a shortcuts for this type of island: `prefix` and `suffix`. Content of this island has to be string.&#x20;

**Icon Island.** Similar to text island, but shows icons instead of text labels. There are two shortcuts for this type of island: `leftIcon` and `rightIcon`. Content of this island has to be JSX.Element

**Actions Island.** Adds buttons as island to the text input. You have to provide array of InputIslandAction as content of this island.&#x20;

**Component Island.** For any other cases you can render your own island. You have to provide array of JSX.Element as content of the island.&#x20;

### <mark style="color:blue;">InputIslandType</mark>

```typescript
enum InputIslandType {
  text = 'text',
  icon = 'icon',
  actions = 'actions',
  components = 'components'
}
```

### <mark style="color:blue;">InputIsland</mark>

```typescript
interface InputIsland {
  type: InputIslandType;
  content: string | JSX.Element | JSX.Element[] | InputIslandAction[];
}
```

### <mark style="color:blue;">InputIslandAction</mark>

```typescript
interface InputIslandAction {
  title: string;
  icon: JSX.Element;
  onClick: () => void;
  disabled?: boolean;
}
```

## Suggestions

{% hint style="warning" %}
This feature is available only in **Altrone 2.0** and later
{% endhint %}

In **Altrone 2.0** TextInput got some new features. Suggestions is one of them. Now you can pass an array with all possible options to the TextInput and when user types something in the field he can see the dropdown with suitable options and choose one of them.&#x20;

Even when user has a list of suggestion he still can type everything what he wants. If you don't want it you should use [Select](/altrone-ui/components/forms/select.md) with `searchable` prop. &#x20;

## Live Suggestions

{% hint style="warning" %}
This feature is available only in **Altrone 2.0** and later
{% endhint %}

This feature is a continuation of the idea of suggestions for TextInput. When this feature is enabled when user types something in the input he also see the selected suggestion right in the text box.&#x20;

Also he can press on `Tab` button to fill with the rest text.&#x20;

{% hint style="danger" %}
You can't use `useLiveSuggestion` without `suggestions` props
{% endhint %}

## Properties <mark style="color:orange;">extends Omit\<React.HTMLProps, 'value' | 'onChange' | 'size' | 'ref'></mark>

| Property                                                     | Type                                                | Description                                                                                            |
| ------------------------------------------------------------ | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| **`value`**<mark style="color:red;">**`*`**</mark>           | `string`                                            | Inputed value                                                                                          |
| **`onChange`**<mark style="color:red;">**`*`**</mark>        | `(value: string) => void`                           | Callback is called when user changed the value in the text field                                       |
| **`leftIsland`**                                             | [`InputIsland`](#inputisland)                       | Left TextInput Island                                                                                  |
| **`rightIsland`**                                            | [`InputIsland`](#inputisland)                       | Right TextInput Island                                                                                 |
| **`prefix`**                                                 | `string`                                            | Shortcut for `text` TextInput Island on the left side                                                  |
| **`suffix`**                                                 | `string`                                            | Shortcut for `text` TextInput Island on the right side                                                 |
| **`leftIcon`**                                               | `JSX.Element`                                       | Shortcut for `icon` TextInput Island on the left side                                                  |
| **`rightIcon`**                                              | `JSX.Element`                                       | Shortcut for `icon` TextInput Island on the left side                                                  |
| **`errorText`**                                              | `string`                                            | Error message for TextInput                                                                            |
| **`hintText`**                                               | `string`                                            | Hint message for TextInput                                                                             |
| **`size`**                                                   | [`Size`](/altrone-ui/utils/enums/size.md)           | Size of the text input                                                                                 |
| **`disabled`**                                               | `boolean`                                           | Marks input as disabled                                                                                |
| **`required`**                                               | `boolean`                                           | Marks input as required                                                                                |
| **`Component`**                                              | `JSX.Element`                                       | Custom html input element                                                                              |
| **`placeholder`**                                            | `string`                                            | Placeholder of the input                                                                               |
| **`suggestions`**                                            | `string[]`                                          | List of suggestions for inputed value.                                                                 |
| <p><strong><code>useLiveSuggestions</code></strong><br> </p> | `boolean`                                           | If true the first matching suggestion will be displayed directly in the input field                    |
| **`loading`**                                                | `boolean`                                           | If true [Loading](/altrone-ui/components/indicators/loading.md) component will be used as right island |
| **`surface`**                                                | [`Surface`](/altrone-ui/utils/enums/surface.md)     | Surface of the input                                                                                   |
| **`elevation`**                                              | [`Elevation`](/altrone-ui/utils/enums/elevation.md) | Shadows of the input                                                                                   |
| **`classNames`**                                             | `{ control?: string }`                              | Custom CSS class                                                                                       |

## History

* **`Altrone 2.0`**:
  * added `loading` prop
  * added `children` prop
  * added `suggestions` prop
  * added `useLiveSuggestions` prop
  * added `surface` prop
  * added `elevation` prop
* **`Altrone 1.0`**: initial release