Fieldset
A set of form controls optionally grouped under a common name.
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.
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.
Props
| Prop | Default | Type |
|---|---|---|
colorPalette | gray | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'The color palette of the component |
size | md | 'sm' | 'md' | 'lg'The size of the component |
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
unstyled | booleanWhether to remove the component's style. | |
invalid | booleanIndicates whether the fieldset is invalid. |
Explorer
Explore the Fieldset component parts interactively. Click on parts in the
sidebar to highlight them in the preview.
Component Anatomy
Hover to highlight, click to select parts
root
errorText
helperText
legend
content