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.ElementType The underlying element to render. | |
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
unstyled | boolean Whether to remove the component's style. | |
invalid | boolean Indicates 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