# Text Input
> Text inputs enable the user to interact with and input content and data.
## Import
```js
import { TextInput } from '@gemini-suite/vera-react';
```
## Examples
### Basic
```jsx
```
### Controlled
It is most common to set up `TextInput` as a [controlled component](https://reactjs.org/docs/forms.html#controlled-components), meaning that React state drives its value. To achieve this you must provide `value` and `onChange` properties.
```jsx
() => {
const [value, setValue] = React.useState('');
const handleChange = event => setValue(event.target.value);
return (
Value: {value}
);
};
```
### With Form Field
`TextInput` should be clearly labeled so it's obvious to users what they should enter. Optionally, you may want to connect helper text and/or validation feedback message to the input element.
Thus it is recommended to wrap inputs with [Form Field](/components/forms/form-field) to create a consistent set of form fields that are accessible to screen reader users.
```jsx
{'Name'}{'Hint: your first name.'}{'Name'}
{'Name is required.'}
```
### Placeholder
Placeholder text provides examples of what to enter.
Placeholder text disappears after the user begins entering data into the input and should not contain crucial information. Do not use placeholder text as a replacement for labels or descriptions.
```jsx
{'Address line 1'}
```
### Disabled input
Pass `isDisabled` prop to the accompanying `FormField` and it will cascade down to the input.
```jsx
{'Name'}
```
You can also pass `isDisabled` prop directly to `TextInput`.
```jsx
```
### With leading/trailing visuals
In some scenarios, you might need to add a visual positioned on the edge inside the input.
This includes icons for decoration and help distinguishing between inputs, as well as special form of help text that works best inline.
`leadingVisual` and `trailingVisual` props help with this use case.
```jsx
{'Search'}} />
```
Use `leadingVisual` for things like currency symbols, country codes, etc.:
```jsx
{'Price'}
```
Use `trailingVisual` for things like units of measure:
```jsx
{'Length'}
```
By using `