---
name: TextInput
menu: Components
---

import PropsTable from 'website-src/components/PropsTable'
import { livePreviewStyle } from '../helpers/constants'
import TextInput from './TextInput'
import cactusTheme from '@repay/cactus-theme'
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'

# TextInput

### Try it out

export const code = `<TextInput placeholder="Winter is Coming" status="success"/>`

<LiveProvider code={code} scope={{ TextInput }}>
  <LiveEditor style={livePreviewStyle} />
  <LiveError />
  <LivePreview />
</LiveProvider>

## Basic usage

```jsx
import { TextInput } from '@repay/cactus-web'
...
// Basic usage
<TextInput />

// Success status
<TextInput status="success" />

// Invalid status
<TextInput status="warning" />

// Error status
<TextInput status="error" />

// Disabled
<TextIput disabled={true} />

// Setting placeholder
<TextInput placeholder="Winter is Coming" />
```

## Properties

<PropsTable of={TextInput} />