Fieldset
A set of form controls optionally grouped under a common name.
import {
Button,
Field,
Fieldset,
For,
Input,
NativeSelect,
Stack,
} from "@chakra-ui/react"
const Demo = () => {
return (
<Fieldset.Root size="lg" maxW="md">
<Stack>
<Fieldset.Legend>Contact details</Fieldset.Legend>
<Fieldset.HelperText>
Please provide your contact details below.
</Fieldset.HelperText>
</Stack>
<Fieldset.Content>
<Field.Root>
<Field.Label>Name</Field.Label>
<Input name="name" />
</Field.Root>
<Field.Root>
<Field.Label>Email address</Field.Label>
<Input name="email" type="email" />
</Field.Root>
<Field.Root>
<Field.Label>Country</Field.Label>
<NativeSelect.Root>
<NativeSelect.Field name="country">
<For each={["United Kingdom", "Canada", "United States"]}>
{(item) => (
<option key={item} value={item}>
{item}
</option>
)}
</For>
</NativeSelect.Field>
<NativeSelect.Indicator />
</NativeSelect.Root>
</Field.Root>
</Fieldset.Content>
<Button type="submit" alignSelf="flex-start">
Submit
</Button>
</Fieldset.Root>
)
}
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.
import {
Field,
Fieldset,
For,
Input,
NativeSelect,
Textarea,
} from "@chakra-ui/react"
const Demo = () => {
return (
<Fieldset.Root size="lg" disabled>
<Fieldset.Legend>Shipping details</Fieldset.Legend>
<Field.Root>
<Field.Label>Street address</Field.Label>
<Input name="address" />
</Field.Root>
<Field.Root>
<Field.Label>Country</Field.Label>
<NativeSelect.Root>
<NativeSelect.Field name="country">
<For each={["United Kingdom", "Canada", "United States"]}>
{(item) => (
<option key={item} value={item}>
{item}
</option>
)}
</For>
</NativeSelect.Field>
<NativeSelect.Indicator />
</NativeSelect.Root>
</Field.Root>
<Field.Root>
<Field.Label>Delivery notes</Field.Label>
<Textarea name="notes" />
</Field.Root>
</Fieldset.Root>
)
}
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.
import {
Field,
Fieldset,
For,
Input,
NativeSelect,
Textarea,
} from "@chakra-ui/react"
const Demo = () => {
return (
<Fieldset.Root size="lg" invalid>
<Fieldset.Legend>Shipping details</Fieldset.Legend>
<Fieldset.Content>
<Field.Root>
<Field.Label>Street address</Field.Label>
<Input name="address" />
</Field.Root>
<Field.Root invalid>
<Field.Label>Country</Field.Label>
<NativeSelect.Root>
<NativeSelect.Field name="country">
<For each={["United Kingdom", "Canada", "United States"]}>
{(item) => (
<option key={item} value={item}>
{item}
</option>
)}
</For>
</NativeSelect.Field>
<NativeSelect.Indicator />
</NativeSelect.Root>
</Field.Root>
<Field.Root invalid>
<Field.Label>Notes</Field.Label>
<Textarea name="notes" />
</Field.Root>
</Fieldset.Content>
<Fieldset.ErrorText>
Some fields are invalid. Please check them.
</Fieldset.ErrorText>
</Fieldset.Root>
)
}
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
fieldset.recipe.ts