Fieldset | Park UI

Contact detailsPlease provide your contact details below.

Name

Email address

Installation

npx @park-ui/cli@next add fieldset

Add Component

Copy the code snippet below into you components folder.

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

const { withProvider, withContext } = createStyleContext(fieldset)

export type RootProps = ComponentProps<typeof Root>
export const Root = withProvider(Fieldset.Root, 'root')
export const RootProvider = withProvider(Fieldset.RootProvider, 'root')
export const Legend = withContext(Fieldset.Legend, 'legend')
export const HelperText = withContext(Fieldset.HelperText, 'helperText')
export const ErrorText = withContext(Fieldset.ErrorText, 'errorText')
export const Content = withContext(ark.div, 'content')
export const Control = withContext(ark.div, 'control')

export { FieldsetContext as Context } from '@ark-ui/react/fieldset'

Integrate Recipe

Integrate this recipe in to your Panda config.

import { fieldsetAnatomy } from '@ark-ui/react/fieldset'
import { defineSlotRecipe } from '@pandacss/dev'

export const fieldset = defineSlotRecipe({
  className: 'fieldset',
  slots: fieldsetAnatomy.extendWith('content', 'control').keys(),
  base: {
    root: {
      display: 'flex',
      justifyContent: 'space-between',
      widht: 'full',
      flexDirection: { base: 'column', md: 'row' },
      gap: { base: '5', md: '8' },
    },
    control: {
      maxW: 'xs',
      display: 'flex',
      flexDirection: 'column',
      width: 'full',
      gap: '1',
    },
    content: {
      display: 'flex',
      flexDirection: 'column',
      width: 'full',
      maxW: '2xl',
      gap: '4',
    },
    legend: {
      color: 'fg.default',
      fontWeight: 'semibold',
    },
    helperText: {
      color: 'fg.muted',
      textStyle: 'sm',
    },
    errorText: {
      display: 'inline-flex',
      alignItems: 'center',
      color: 'fg.error',
      gap: '2',
      fontWeight: 'medium',
      textStyle: 'sm',
    },
  },
})

Usage

import { Fieldset } from '@/components/ui'

<Fieldset.Root>
  <Fieldset.Control>
    <Fieldset.Legend />
    <Fieldset.HelperText />
  </Fieldset.Control>
  <Fieldset.Content />
</Fieldset.Root>

Examples

Disabled

Use the disabled prop to disable the fieldset to disable all input elements within the fieldset.

Contact detailsPlease provide your contact details below.

Name

Email address

Invalid

Use the invalid prop to mark the fieldset as invalid, which will display the error text.

Shipping detailsSome fields are invalid. Please check them.

Name

Email addressThe email has already been taken.

Props

Root

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`invalid`		`boolean` Indicates whether the fieldset is invalid.