 <FormField
  label="Your Email"
  name="email"
  type="email"
  placeholder="Your Email"
  description="Enter your email address to receive updates and news."
/>

API Reference

Prop	Type	Default
`label`	`string`
`name`	`string`
`type`	`"text" \| "email" \| "password" \| "search"`	`"text"`
`size`	`"1" \| "2" \| "3"`	`"2"`
`left`	`React.ReactNode`
`right`	`React.ReactNode`
`helper`	`string`
`invalid`	`boolean`	`false`
`disabled`	`boolean`	`false`
`readOnly`	`boolean`	`false`
`placeholder`	`string`
`maxLength`	`number`
`minLength`	`number`
`aria-describedby`	`string`
`aria-label`	`string`
`visuallyHideLabel`	`boolean`	`false`

Examples

Application name

 <FormField
  label="Application name"
  name="applicationName"
  helper="Third-party application connected via Pipes"
/>

With Slots

You can compose one slot on the left and one on the right.

Application name

 <FormField
  label="Application name"
  name="applicationName"
  left={
    <IconButton size="1">
      <StarIcon height="16" width="16" />
    </IconButton>
  }
  right={
    <IconButton size="1">
      <StarIcon height="16" width="16" />
    </IconButton>
  }
/>

States

The invalid prop indicates that the field’s value is invalid. Fields are styled as valid by default, though built-in client-side validation still applies. When a field is invalid, use the invalidText prop to display an error message with clear instructions for correction.

User email

The email address entered is already taken

 <FormField
  label="User email"
  name="userEmail"
  type="email"
  placeholder="user@example.com"
  defaultValue="mg@workos.com"
  invalid
  invalidText="The email address entered is already taken"
/>

With Copy Button

Very important value

 <FormField
  label="Very important value"
  name="important"
  readOnly
  defaultValue="sphvpisznne5n3cm9lbewomius8n486e"
  copyable
/>

Form Field

On this page

API Reference

Examples

With a helper tooltip

With Slots

States

With Copy Button