CTAForm

Use CTAForm to create a form that is used to collect minimal information from users.

Experimental
Not reviewed for accessibility

On this page

import {CTAForm} from '@primer/react-brand'

Examples

Default

<CTAForm>
  <CTAForm.Input>
    <FormControl required>
      <FormControl.Label>Your work email address</FormControl.Label>
      <TextInput placeholder="name" />
    </FormControl>
  </CTAForm.Input>
  <CTAForm.Confirm>
    <FormControl required>
      <FormControl.Label>
        <Text size="300" variant="muted">
          I agree to the{' '}
          <InlineLink href="www.github.com">Privacy Policy</InlineLink> and{' '}
          <InlineLink href="www.github.com">Terms of Service</InlineLink>
        </Text>
      </FormControl.Label>
      <Checkbox name="confirm" />
    </FormControl>
  </CTAForm.Confirm>
  <CTAForm.Action>Subscribe</CTAForm.Action>
</CTAForm>

<CTAForm>
  <CTAForm.Input>
    <FormControl required>
      <FormControl.Label>Your work email address</FormControl.Label>
      <TextInput placeholder="name" />
    </FormControl>
  </CTAForm.Input>
  <CTAForm.Confirm>
    <FormControl required>
      <FormControl.Label>
        <Text size="300" variant="muted">
          I agree to the{' '}
          <InlineLink href="www.github.com">Privacy Policy</InlineLink> and{' '}
          <InlineLink href="www.github.com">Terms of Service</InlineLink>
        </Text>
      </FormControl.Label>
      <Checkbox name="confirm" />
    </FormControl>
  </CTAForm.Confirm>
  <CTAForm.Action>Subscribe</CTAForm.Action>
</CTAForm>

Component without confirm block

<CTAForm>
  <CTAForm.Input>
    <FormControl required>
      <FormControl.Label>Your work email address</FormControl.Label>
      <TextInput placeholder="name" />
    </FormControl>
  </CTAForm.Input>
  <CTAForm.Action>Subscribe</CTAForm.Action>
</CTAForm>

<CTAForm>
  <CTAForm.Input>
    <FormControl required>
      <FormControl.Label>Your work email address</FormControl.Label>
      <TextInput placeholder="name" />
    </FormControl>
  </CTAForm.Input>
  <CTAForm.Action>Subscribe</CTAForm.Action>
</CTAForm>

Using onChange & onSubmit handlers

<CTAForm onSubmit={() => alert('onSubmit event triggered')}>
  <CTAForm.Input onChange={() => console.log('onChange event triggered')}>
    <FormControl required>
      <FormControl.Label>Your work email address</FormControl.Label>
      <TextInput placeholder="name" />
    </FormControl>
  </CTAForm.Input>
  <CTAForm.Action>Subscribe</CTAForm.Action>
</CTAForm>

<CTAForm onSubmit={() => alert('onSubmit event triggered')}>
  <CTAForm.Input onChange={() => console.log('onChange event triggered')}>
    <FormControl required>
      <FormControl.Label>Your work email address</FormControl.Label>
      <TextInput placeholder="name" />
    </FormControl>
  </CTAForm.Input>
  <CTAForm.Action>Subscribe</CTAForm.Action>
</CTAForm>

Component props

CTAForm

name	type	default	required	description
`action`	`string`	`undefined`	`false`	The URL that processes the form submission
`method`	`string`	`undefined`	`false`	The HTTP method to submit the form with
`target`	`string`	`undefined`	`false`	Indicates where to display the response after submitting the form.
`className`	`string`	`undefined`	`false`	Sets a custom class

Additional props can be passed to the <form> element. See MDN for a list of props accepted by the <form> element.

CTAForm.Input

name	type	default	required	description
`className`	`string`	`undefined`	`false`	Sets a custom class

CTAForm.Confirm

name	type	default	required	description
`className`	`string`	`undefined`	`false`	Sets a custom class

CTAForm.Action

name	type	default	required	description
`className`	`string`	`undefined`	`false`	Sets a custom class

Edit this page on GitHub