hightouch UI

Form Field

Form field is a wrapper for any input that's part of a form.

#

A descriptive name for your resource to quickly find it later.

Must be at least 6 characters long

import { FormField, TextInput } from "@hightouchio/ui";

<FormField
label="Name"
description="A descriptive name for your resource to quickly find it later."
tip="Must be at least 6 characters long"
>
<TextInput />
</FormField>;

#

#

Required form fields must have isRequired prop set to true. This adds a red asterisk near the label.

A descriptive name for your resource to quickly find it later.

Must be at least 6 characters long

import { FormField, TextInput } from "@hightouchio/ui";

<FormField
isRequired
label="Name"
description="A descriptive name for your resource to quickly find it later."
tip="Must be at least 6 characters long"
>
<TextInput />
</FormField>;

#

Normally form fields don't need to be marked as optional, but in Formkit forms usually all fields are required and few are not. In that context, it may be useful to explicitly mark field as optional, which adds a small badge near the label.

A descriptive name for your resource to quickly find it later.

Must be at least 6 characters long

import { FormField, TextInput } from "@hightouchio/ui";

<FormField
isOptional
label="Name"
description="A descriptive name for your resource to quickly find it later."
tip="Must be at least 6 characters long"
>
<TextInput />
</FormField>;

#

Set error message via error prop to mark the field as invalid and show that message below the input.

A descriptive name for your resource to quickly find it later.
This name already exists, enter a different one

Must be at least 6 characters long

import { FormField, TextInput } from "@hightouchio/ui";

<FormField
isRequired
label="Name"
description="A descriptive name for your resource to quickly find it later."
tip="Must be at least 6 characters long"
error="This name already exists, enter a different one"
>
<TextInput />
</FormField>;

#

Beta
A descriptive name for your resource to quickly find it later.

Must be at least 6 characters long

import { FormField, TextInput, Badge } from "@hightouchio/ui";

<FormField
label="Name"
badge={<Badge>Beta</Badge>}
description="A descriptive name for your resource to quickly find it later."
tip="Must be at least 6 characters long"
>
<TextInput />
</FormField>;

#

A descriptive name for your resource to quickly find it later.

Must be at least 6 characters long

Lock this field
import { FormField, TextInput, Row, Text, Switch } from "@hightouchio/ui";

<FormField
isOptional
label="Name"
description="A descriptive name for your resource to quickly find it later."
tip="Must be at least 6 characters long"
rightContent={
<Row
align="center"
bg="base.background"
borderRadius="md"
gap={4}
px={4}
py={2}
>
<Text as="span" fontWeight="semibold">
Lock this field
</Text>
<Switch
isChecked={false}
aria-label="Lock this field"
size="sm"
onChange={() => null}
/>
</Row>
}
>
<TextInput />
</FormField>;

#

#

  • When you're adding an input to the form.

#

  • When you're adding an input outside of the form.

#

  • Use sentence case everywhere.
  • Don't add a dot at the end to label, tip and error.
  • Always end a sentence with a dot in description.

#

Inherits margin props.

NameDefaultDescription
isRequired

—

boolean

Determines if this field is required.

isOptionalfalseboolean

Indicates if this field is optional.

label

—

ReactNode

Field label.

badge

—

ReactNode

Badge to display near the label.

description

—

ReactNode

Extended description of the field.

rightContent

—

ReactNode

Content to display on the right side of the field. Appears inline with the label.

error

—

string

Error message when this field's input is invalid.

children

—

ReactNode

Field input.

tip

—

string

Instructions for the input value.

On this page