# Input

Inputs let users enter and edit text.

![](https://1974771079-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LK6D3dfAKckmlwkiENO%2F-MGmdhd73qWg_lPPzHFf%2F-MGxGqRQ5Z7LOUAmCEzq%2FSimulator%20Screen%20Shot%20-%20iPhone%2011%20-%202020-09-01%20at%2017.10.54.png?alt=media\&token=b51f73bd-ba96-4cb9-9e7a-f02884d17820)

```jsx
import { Input } from '../components'

<Input
    placeholder={'Place your Text'}
/>
```

Input can be dark on the bright screen.

```jsx
import { Input } from '../components'

<Input
    dark
    placeholder={'Place your Text'}
/>
```

Input can be disabled:

```jsx
import { Input } from '../components/'

<Input
    disabled
    placeholder={'Place your Text'}
/>
```

You can make input bordered:

```jsx
import { Input } from '../components/'

<Input
    type="bordered"
    placeholder={'Place your Text'}
/>
```

You can make the input with a caption:

```jsx
import { Input } from '../components/'

<Input
    caption="Simple caption text"
    placeholder={'Place your Text'}
/>
```

You can make the input with a label:

```jsx
import { Input } from '../components/'

<Input
    label="Simple label text"
    placeholder={'Place your Text'}
/>
```

## Properties

| Name        | Type                                       | Description                                                                                                             |
| ----------- | ------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- |
| placeholder | `string`                                   | A string to be displayed when there is no value.                                                                        |
| dark        | `bool`                                     | Makes input dark.                                                                                                       |
| disabled    | `bool`                                     | Makes input disabled.                                                                                                   |
| label       | `ReactText \| (TextProps) => ReactElement` | String, number or a function component to render above the input field. If it is a function, expected to return a Text. |
| caption     | `ReactText \| (TextProps) => ReactElement` | String, number or a function component to render below the input field. If it is a function, expected to return a Text. |
| value       | `string`                                   | A value displayed in input field.                                                                                       |