Field | Park UI

Installation

npx @park-ui/cli add field

Add Component

Copy the code snippet below into you components folder.

'use client'
import { Field } from '@ark-ui/react/field'
import type { ComponentProps } from 'react'
import { createStyleContext } from 'styled-system/jsx'
import { field } from 'styled-system/recipes'

const { withProvider, withContext } = createStyleContext(field)

export type RootProps = ComponentProps<typeof Root>
export const Root = withProvider(Field.Root, 'root')
export const RootProvider = withProvider(Field.RootProvider, 'root')
export const ErrorText = withContext(Field.ErrorText, 'errorText')
export const HelperText = withContext(Field.HelperText, 'helperText')
export const Label = withContext(Field.Label, 'label')
export const RequiredIndicator = withContext(Field.RequiredIndicator, 'requiredIndicator')

export { FieldContext as Context } from '@ark-ui/react/field'

Integrate Recipe

Integrate this recipe in to your Panda config.

import { fieldAnatomy } from '@ark-ui/react/field'
import { defineSlotRecipe } from '@pandacss/dev'

export const field = defineSlotRecipe({
  className: 'field',
  slots: fieldAnatomy.keys(),
  base: {
    root: {
      display: 'flex',
      flexDirection: 'column',
      gap: '1.5',
    },
    label: {
      alignItems: 'center',
      color: 'fg.default',
      display: 'flex',
      gap: '0.5',
      textAlign: 'start',
      userSelect: 'none',
      textStyle: 'label',
      _disabled: {
        layerStyle: 'disabled',
      },
    },
    requiredIndicator: {
      color: 'colorPalette.solid',
    },
    helperText: {
      color: 'fg.muted',
      textStyle: 'sm',
      _disabled: {
        layerStyle: 'disabled',
      },
    },
    errorText: {
      color: 'error',
      textStyle: 'sm',
    },
  },
})

Usage

import { Field, Input } from '@/components/ui'

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

Examples

Invalid

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

EmailThis is an error text

HelperText

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

EmailThis is a helper text

Disabled

Use the disabled prop to disable the field.

EmailThis is a helper text

Required

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

Closed Component

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

import { forwardRef, type ReactNode } from 'react'
import { Field as StyledField } from '@/components/ui'

export interface FieldProps extends Omit<StyledField.RootProps, 'label'> {
  label?: ReactNode
  helperText?: ReactNode
  errorText?: ReactNode
  optionalText?: ReactNode
}

export const Field = forwardRef<HTMLDivElement, FieldProps>(function Field(props, ref) {
  const { label, children, helperText, errorText, optionalText, ...rest } = props
  return (
    <StyledField.Root ref={ref} {...rest}>
      {label && (
        <StyledField.Label>
          {label}
          <StyledField.RequiredIndicator fallback={optionalText} />
        </StyledField.Label>
      )}
      {children}
      {helperText && <StyledField.HelperText>{helperText}</StyledField.HelperText>}
      <StyledField.ErrorText>{errorText}</StyledField.ErrorText>
    </StyledField.Root>
  )
})

Props

Root

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`disabled`		`boolean` Indicates whether the field is disabled.
`ids`		`ElementIds` The ids of the field parts.
`invalid`		`boolean` Indicates whether the field is invalid.
`readOnly`		`boolean` Indicates whether the field is read-only.
`required`		`boolean` Indicates whether the field is required.

RequiredIndicator

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`fallback`		`string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...>`

Textarea

Prop	Default	Type
`autoresize`	`false`	`boolean` Whether the textarea should autoresize
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.