Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsPlaygroundEnterpriseBlog
Sponsor

Fieldset

A set of form controls optionally grouped under a common name.

SourceStorybookRecipeArk
Contact detailsPlease provide your contact details below.

Usage

import { Fieldset } from "@chakra-ui/react"
<Fieldset.Root>
  <Fieldset.Legend />
  <Fieldset.Content />
</Fieldset.Root>

Examples

Disabled

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

Shipping details

Invalid

Use the invalid prop to mark the fieldset as invalid. This will show the error text.

Note: You need to pass the invalid prop to the Field component within the fieldset to make each input element invalid.

Shipping details
Some fields are invalid. Please check them.

Props

PropDefaultType
asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
invalid
boolean

Indicates whether the fieldset is invalid.

Previous

Field

Next

File Upload