import { Button, Fieldset, Input, Stack } from "@chakra-ui/react"
import { Field } from "@/components/ui/field"
import {
NativeSelectField,
NativeSelectRoot,
} from "@/components/ui/native-select"
const Demo = () => {
return (
<Fieldset.Root gap="4" maxW="md">
<Stack>
<Fieldset.Legend>Contact details</Fieldset.Legend>
<Fieldset.HelperText>
Please provide your contact details below.
</Fieldset.HelperText>
</Stack>
<Fieldset.Content>
<Field label="Name">
<Input name="name" />
</Field>
<Field label="Email address">
<Input name="email" type="email" />
</Field>
<Field label="Country">
<NativeSelectRoot>
<NativeSelectField
name="country"
items={[
"United Kingdom (UK)",
"Canada (CA)",
"United States (US)",
]}
/>
</NativeSelectRoot>
</Field>
</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 { Fieldset, Input, Textarea } from "@chakra-ui/react"
import { Field } from "@/components/ui/field"
import {
NativeSelectField,
NativeSelectRoot,
} from "@/components/ui/native-select"
const Demo = () => {
return (
<Fieldset.Root disabled>
<Fieldset.Legend>Shipping details</Fieldset.Legend>
<Field label="Street address">
<Input name="address" />
</Field>
<Field label="Country">
<NativeSelectRoot>
<NativeSelectRoot>
<NativeSelectField
name="country"
items={[
"United Kingdom (UK)",
"Canada (CA)",
"United States (US)",
]}
/>
</NativeSelectRoot>
</NativeSelectRoot>
</Field>
<Field label="Delivery notes">
<Textarea name="notes" />
</Field>
</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 { Fieldset, Input, Textarea } from "@chakra-ui/react"
import { Field } from "@/components/ui/field"
import {
NativeSelectField,
NativeSelectRoot,
} from "@/components/ui/native-select"
const Demo = () => {
return (
<Fieldset.Root invalid>
<Fieldset.Legend>Shipping details</Fieldset.Legend>
<Fieldset.Content>
<Field label="Street address">
<Input name="address" />
</Field>
<Field label="Country" invalid>
<NativeSelectRoot>
<NativeSelectField
name="country"
items={[
"United Kingdom (UK)",
"Canada (CA)",
"United States (US)",
]}
/>
</NativeSelectRoot>
</Field>
<Field label="Notes" invalid>
<Textarea name="notes" />
</Field>
</Fieldset.Content>
<Fieldset.ErrorText>
Some fields are invalid. Please check them.
</Fieldset.ErrorText>
</Fieldset.Root>
)
}
Props
| Prop | Default | Type |
|---|---|---|
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
invalid | booleanIndicates whether the fieldset is invalid. |