Field

Used to add labels, help text, and error messages to form fields.

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

const Demo = () => {
  return (
    <Field label="Email">
      <Input placeholder="me@example.com" />
    </Field>
  )
}

Setup

If you don't already have the snippet, run the following command to add the field snippet

chakra snippet add field

The snippet includes a closed component composition for the Field component.

Usage

import { Field } from "@/components/ui/field"

<Field>
  <Input />
</Field>

Examples

Error Text

Use the invalid and errorText to indicate that the field is invalid.

Email This is an error text

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

const Demo = () => {
  return (
    <Field label="Email" invalid errorText="This is an error text">
      <Input placeholder="me@example.com" />
    </Field>
  )
}

Helper Text

Use the helperText prop to add helper text to the field.

Email This is a helper text

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

const Demo = () => {
  return (
    <Field label="Email" helperText="This is a helper text">
      <Input placeholder="me@example.com" />
    </Field>
  )
}

Disabled

Use the disabled prop to disable the field.

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

const Demo = () => {
  return (
    <Field label="Email" disabled>
      <Input placeholder="me@example.com" />
    </Field>
  )
}

Textarea

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

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

const Demo = () => {
  return (
    <Field label="Email">
      <Textarea placeholder="Email" />
    </Field>
  )
}

Native Select

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

import { Field } from "@/components/ui/field"
import {
  NativeSelectField,
  NativeSelectRoot,
} from "@/components/ui/native-select"

const Demo = () => {
  return (
    <Field label="Email">
      <NativeSelectRoot>
        <NativeSelectField items={["Option 1", "Option 2", "Option 3"]} />
      </NativeSelectRoot>
    </Field>
  )
}