Back to Tamagui

Input & Textarea

code/tamagui.dev/data/docs/components/inputs/1.0.0.mdx

1.144.4982 B
Original Source
<HeroContainer demoMultiple> <InputsDemo /> </HeroContainer>
tsx

Using the same base component TextInput, from React Native or React Native Web, Tamagui simply wraps these components to allow the full set of style props, as well as scaling all the styles up or down using the size property, much like Button.

Installation

Input is already installed in tamagui, or you can install it independently:

bash
npm install @tamagui/input

Input

A one-line input field:

tsx
import { Input } from 'tamagui'

export const App = () => (
  // Accepts size and style properties directly
  <Input size="$4" borderWidth={2} />
)

TextArea

For multi-line inputs:

tsx
import { TextArea } from 'tamagui'

export const App = () => (
  // Accepts size and style properties directly
  <TextArea size="$4" borderWidth={2} />
)