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

import { Playground, Props } from 'docz'
import TextInput from './'

# TextInput

Use `TextInput` for text-like input fields (`text, password, search, email, number,
url, tel`).

Can be controlled or uncontrolled. For controlled, you must supply the
`value` and `onChange` props.

For uncontrolled, you must omit the `value` prop. And optionally supply the
`defaultValue` prop.

## Import
`import { TextInput } from '@blasterjs/core'`

## Basic usage

<Playground>
    <TextInput
        placeholder="Favorite movie"
        defaultValue="One Flew Over the Cuckoo's Nest"
        mb={4}
    />
    <TextInput placeholder="Disabled" disabled width="45%" mr={8} />
    <TextInput placeholder="Invalid" required width="45%" />
</Playground>

## Alternate types

<Playground>
    <TextInput type="password" placeholder="Password" mb={4} />
    <TextInput type="search" placeholder="Search" mb={4} />
    <TextInput type="email" placeholder="Email" mb={4} />
    <TextInput type="number" placeholder="Number" mb={4} />
    <TextInput type="url" placeholder="URL" mb={4} />
    <TextInput type="tel" placeholder="Telephone" mb={4} />
</Playground>


## PropTypes

| Prop | Type | Required | Default | Description |
|:-----|:-----|:---------|:--------|:------------|
| type | string | no | "text" |  |
| invalid | bool | no | false |  |
| `COMMON` | Style Prop |  |  | see [Style Props](/style-props) |
| `BACKGROUND` | Style Prop |  |  | see [Style Props](/style-props) |
| `BORDER` | Style Prop |  |  | see [Style Props](/style-props) |
| `TYPOGRAPHY` | Style Prop |  |  | see [Style Props](/style-props) |
| `MISC` | Style Prop |  |  | see [Style Props](/style-props) |
| `LAYOUT` | Style Prop |  |  | see [Style Props](/style-props) |
| `POSITION` | Style Prop |  |  | see [Style Props](/style-props) |
| `FLEX_ITEM` | Style Prop |  |  | see [Style Props](/style-props) |


## Theming

### Schema
```
{
  space: {
    p
  },
  colors: {
    bg,
    color,
    borderColor,
    borderColorFocus,
    borderColorInvalid,
    shadowColorFocus,
    bgDisabled
  },
  fonts: {
    fontFamily
  },
  fontSizes: {
    fontSize
  },
  borders: {
    border
  },
  radii: {
    borderRadius
  },
  overrides: css`
    ...
  `
}
```

- [Default theme](https://github.com/raster-foundry/blasterjs/tree/master/packages/core/theme/components/textInput)
- [Learn more about themeing](/blaster-theme)