Input & TextArea

yarn
npm
bun
pnpm
Copy
yarn add @tamagui/input

import { Input } from 'tamagui'

export default () => <Input placeholder="Enter text..." size="md" />
Copy

import { TextArea } from 'tamagui'

export default () => <TextArea placeholder="Enter long text..." rows={4} />
Copy

// Password input
<Input type="password" />

// Email input (shows email keyboard on native)
<Input type="email" />

// Phone number (shows phone pad on native)
<Input type="tel" />

// Number input (shows numeric keyboard on native)
<Input type="number" />

// URL input
<Input type="url" />

// Search input
<Input type="search" />
Copy

<Input enterKeyHint="search" />
<Input enterKeyHint="send" />
<Input enterKeyHint="done" />
<Input enterKeyHint="go" />
<Input enterKeyHint="next" />
Copy

<Input
  name="email"
  placeholder="Enter email"
  required
  maxLength={100}
  minLength={3}
  pattern="[a-z@.]+"
  autoComplete="email"
  autoFocus
  readOnly={false}
  disabled={false}
/>
Copy

<Input
  onChange={(e) => console.log(e.target.value)}
  onFocus={(e) => console.log('focused')}
  onBlur={(e) => console.log('blurred')}
  onKeyDown={(e) => {
    if (e.key === 'Enter') {
      // handle enter
    }
  }}
/>
Copy

// Deprecated - use onChange instead
<Input onChangeText={(text) => setText(text)} />

// Preferred
<Input onChange={(e) => setText(e.target.value)} />
Copy

<Input
  onSubmitEditing={(e) => {
    console.log('Submitted:', e.nativeEvent.text)
  }}
/>
Copy

<Input
  size="md"
  borderWidth={2}
  borderColor="border-color hover:border-color-hover focus:border-color-focus"
  borderRadius="4"
  backgroundColor="background"
  color="color"
  placeholderTextColor="placeholder-color"
  selectionColor="accent-color"
/>
Copy

<Input keyboardAppearance="dark" />
<Input keyboardAppearance="light" />
<Input keyboardAppearance="default" />
Copy

<Input textContentType="emailAddress" />
<Input textContentType="password" />
<Input textContentType="newPassword" />
<Input textContentType="oneTimeCode" />
<Input textContentType="telephoneNumber" />
<Input textContentType="username" />
Copy

// Boolean values (work everywhere)
<Input autoCorrect={false} />
<Input autoCorrect={true} />

// String values (web-style, converted on native)
<Input autoCorrect="off" />
<Input autoCorrect="on" />
Copy

// Native-style values (recommended - work everywhere)
<Input autoCapitalize="none" />        // No capitalization
<Input autoCapitalize="sentences" />   // Capitalize first letter of sentences
<Input autoCapitalize="words" />       // Capitalize first letter of each word
<Input autoCapitalize="characters" />  // Capitalize all characters

// Web-style values (mapped on native)
<Input autoCapitalize="off" />  // Maps to "none" on native
<Input autoCapitalize="on" />   // Maps to "sentences" on native
Copy