---
name: TextInput
route: /components/textinput
menu: Components
---

import { Playground, PropsTable } from 'docz';
import TextInput from './TextInput';

# TextInput

This is the base text input component. It directly maps to an `input` element. If a label is required, use `TextInputField` instead.

## Usage

```javascript
import { TextInput } from '@snowpak/powpow';

export default () => (
  <TextInput placeholder="Why is text input?" />;
);
```

## Props

<PropsTable of={TextInput} />

## Examples

### Default

<Playground>
  <TextInput placeholder="Why is text input?" data-cy="sp-textInput--default" />
</Playground>

### Custom width

<Playground>
  <TextInput
    __width="240px"
    placeholder="Why is text input?"
    data-cy="sp-textInput--customWidth"
  />
</Playground>

### Custom width, height and font size

<Playground>
  <TextInput
    __height="64px"
    __width="400px"
    __fontSize="24px"
    placeholder="Why is text input?"
    data-cy="sp-textInput--customHeight"
  />
</Playground>

### Invalid

<Playground>
  <TextInput
    isInvalid
    placeholder="Why is text input?"
    data-cy="sp-textInput--invalid"
  />
</Playground>