GitHub
wwwwwwwwwwwwwwwwwww

Input & Textarea

Form fields for text

yarnnpmbunpnpm
import type { SizeTokens } from 'tamagui'

import { Button, Input, TextArea, XStack, YStack } from 'tamagui'



export function InputsDemo() {

  return (

    <YStack
      width={200}
      minHeight={250}
      overflow="hidden"
      space="$2"
      margin="$3"
      padding="$2"
    >

      <InputDemo size="$2" />

      <InputDemo size="$3" />

      <InputDemo size="$4" />

      <TextArea placeholder="Enter your details..." />

    </YStack>

  )

}



function InputDemo(props: { size: SizeTokens }) {

  return (

    <XStack alignItems="center" space="$2">

      <Input flex={1} size={props.size} placeholder={`Size ${props.size}...`} />

      <Button size={props.size}>Go</Button>

    </XStack>

  )

}

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.

Input

A one-line input field:

import { Input } from 'tamagui'



export const App = () => (

  // Accepts size and style properties directly

  <Input size="$4" borderWidth={2} />

)

TextArea

For multi-line inputs:

import { TextArea } from 'tamagui'



export const App = () => (

  // Accepts size and style properties directly

  <TextArea size="$4" borderWidth={2} />

)

Previous

Form

Next

Label

Edit this page on GitHub.