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 add @tamagui/form

Anatomy

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

export default () => (
  <Form>
    {/* ... */}
    <Form.Trigger asChild>
      <Button />
    </Form.Trigger>
  </Form>
)