Field

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

Usage

import { Field } from "chakra-ui-solid";

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

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.

EmailThis is an error text

Error Icon

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

EmailThis is an error text

Helper Text

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

EmailThis is a helper text

Horizontal

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

Name

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.

EmailOptional

Closed Component

Here’s how to setup the Field for a closed component composition. Solid has no forwardRef, so there is nothing to wrap: a ref is a prop like any other and reaches Field.Root on the spread.

EmailWe never share it.

Props

Root

FieldRootProps
Prop	Default	Type
`disabled`	`false`	`boolean` Whether the control ignores input entirely and drops out of the tab order.
`id`	—	`string` Seeds every id the field hands out — the root is `field::{id}`, the label `field::{id}::label`, and the control is the `id` itself. Defaults to a generated id. Pass `ids` to name the elements themselves.
`ids`	—	`FieldElementIds` Override individual element ids, for pointing an ARIA relationship at a specific one.
`invalid`	`false`	`boolean` Whether the value fails validation — it marks the control `aria-invalid` and lets the `ErrorText` name it through `aria-errormessage`.
`orientation`	`'vertical'`	`ConditionalValue<'vertical' \| 'horizontal' \| PresetVariant<'field', 'orientation'>>` Whether the label sits above the control or beside it.
`readOnly`	`false`	`boolean` Whether the control shows its value but refuses edits. Unlike `disabled` it stays focusable and still submits.
`required`	`false`	`boolean` Whether the control must be filled in — it marks the control `required` and shows the `RequiredIndicator`.
`target`	—	`string` The `<Field.Item value="…">` the label points at, for a field whose label heads a set of controls rather than one.

Plus Omit<HTMLChakraProps<"div">, "id"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.