wwwwwwwwwwwwwwwwwww

Form

Use the Form to wrap input elements, define a trigger element, and get a top level submit callback.

 
import { useEffect, useState } from 'react'

import type { SizeTokens } from 'tamagui'

import { Button, Form, H4, Spinner } from 'tamagui'



export function FormsDemo(props: { size: SizeTokens }) {

  const [status, setStatus] = useState<'off' | 'submitting' | 'submitted'>('off')



  useEffect(() => {

    if (status === 'submitting') {

      const timer = setTimeout(() => setStatus('off'), 2000)

      return () => {

        clearTimeout(timer)

      }

    }

  }, [status])



  return (

    <Form
      alignItems="center"
      minWidth={300}
      gap="$2"
      onSubmit={() => setStatus('submitting')}
      borderWidth={1}
      borderRadius="$4"
      backgroundColor="$background"
      borderColor="$borderColor"
      padding="$8"
    >

      <H4>{status[0].toUpperCase() + status.slice(1)}</H4>



      <Form.Trigger asChild disabled={status !== 'off'}>

        <Button icon={status === 'submitting' ? () => <Spinner /> : undefined}>

          Submit

        </Button>

      </Form.Trigger>

    </Form>

  )

}

Features

  • Works on native and web.

  • Outputs accessible forms.

  • Works with every Tamagui prop.

Installation

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

 
yarn @tamagui/form

Anatomy

 
import { Form } from 'tamagui' // or '@tamagui/form'



export default () => (

  <Form>

    {/* ... */}

    <Form.Trigger asChild>

      <Button />

    </Form.Trigger>

  </Form>

)

API Reference

Form

Props

  • onSubmit (required)

    () => void

    Must use Form.Trigger to ensure onSubmit will callback.

    •

    Form.Trigger

    Wrap this around your submitting element to make the form submit. We recommend using asChild to a child element of your choosing for more control.

    Accepts Tamagui Props.

    Previous

    Checkbox

    Next

    Input & TextArea

    Edit this page on GitHub.