Field

Usage

import { Field } from "@chakra-ui/react"

<Field.Root>
  <Field.Label>
    <Field.RequiredIndicator />
  </Field.Label>
  <Input />
  <Field.HelperText />
  <Field.ErrorText />
</Field.Root>

:::info

If you prefer a closed component composition, check out the snippet below.

:::

Examples

Error Text

Pass the invalid prop to Field.Root and use the Field.ErrorText to indicate that the field is invalid.

Error Icon

Field.ErrorIcon inherits the surrounding text color and defaults to 1em, keeping its size consistent even when Field.ErrorText stretches full width.

Helper Text

Use the Field.HelperText to add helper text to the field.

Horizontal

Use the orientation="horizontal" prop to align the label and input horizontally.

Disabled

Use the disabled prop to disable the field.

Textarea

Here's how to use the field component with a textarea.

Native Select

Here's how to use the field component with a native select.

Required

Pass the required prop to Field.Root and use the Field.RequiredIndicator to indicate that the field is required.

Optional

Pass the fallback prop to the Field.RequiredIndicator to add optional text.

Closed Component

Here's how to setup the Field for a closed component composition.

If you want to automatically add the closed component to your project, run the command:

npx @chakra-ui/cli snippet add field

Customization

Customizing slots

The Field component has multiple slots that can be customized. Use the Explorer below to see all available slots.

import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react"
import { fieldSlotRecipe } from "@chakra-ui/react/recipes"

const customFieldRecipe = fieldSlotRecipe.extend({
  base: {
    label: {
      color: "blue.600",
      fontWeight: "bold",
    },
    errorText: {
      bg: "red.50",
      p: "2",
      borderRadius: "md",
    },
    helperText: {
      fontStyle: "italic",
    },
    requiredIndicator: {
      color: "orange.500",
    },
  },
})

const config = defineConfig({
  theme: {
    slotRecipes: {
      field: customFieldRecipe,
    },
  },
})

export const system = createSystem(defaultConfig, config)

Adding new variants

Extend the Field recipe to add new layout or style variants:

const customFieldRecipe = fieldSlotRecipe.extend({
  variants: {
    variant: {
      // Add a new style variant
      outlined: {
        root: {
          border: "1px solid",
          borderColor: "border",
          borderRadius: "md",
          p: "3",
        },
        label: {
          bg: "bg",
          px: "2",
          position: "absolute",
          top: "-2",
          left: "3",
        },
      },
    },
    size: {
      // Add a new size variant
      lg: {
        root: {
          gap: "3",
        },
        label: {
          textStyle: "md",
        },
      },
    },
  },
})

After customizing, run the typegen command to regenerate the types. See the CLI docs for how to run typegen in postinstall, CI, and monorepos.

npx @chakra-ui/cli typegen ./theme.ts

Props

Root

Explorer

Explore the Field component parts interactively. Click on parts in the sidebar to highlight them in the preview.