import { Button, Field, Fieldset, Input, Stack } from '@chakra-ui/react'
import { NativeSelect } from '#components/ui/native-select'
export const FieldsetBasic = () => {
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>
<option value="United Kingdom (UK)">United Kingdom (UK)</option>
<option value="Canada (CA)">Canada (CA)</option>
<option value="United States (US)">United States (US)</option>
</NativeSelect>
</Field.Root>
</Fieldset.Content>
<Button type="submit" alignSelf="flex-start">
Submit
</Button>
</Fieldset.Root>
)
}
Anatomy
import { Fieldset } from '@chakra-ui/react'<Fieldset.Root>
<Fieldset.Legend />
<Fieldset.HelperText />
<Fieldset.Content />
<Fieldset.ErrorText />
</Fieldset.Root>Examples
Basic
Group related fields under a common Fieldset.Legend. Use the size prop on
the Fieldset.Root to change the spacing and typography of the group.
import { Button, Field, Fieldset, Input, Stack } from '@chakra-ui/react'
import { NativeSelect } from '#components/ui/native-select'
export const FieldsetBasic = () => {
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>
<option value="United Kingdom (UK)">United Kingdom (UK)</option>
<option value="Canada (CA)">Canada (CA)</option>
<option value="United States (US)">United States (US)</option>
</NativeSelect>
</Field.Root>
</Fieldset.Content>
<Button type="submit" alignSelf="flex-start">
Submit
</Button>
</Fieldset.Root>
)
}
Disabled
Use the disabled prop to disable the fieldset to disable all input elements
within the fieldset.
'use client';
import { Field, Fieldset, Input, Textarea } from '@chakra-ui/react'
import { NativeSelect } from '#components/ui/native-select'
export const FieldsetWithDisabled = () => {
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>
<option value="United Kingdom (UK)">United Kingdom (UK)</option>
<option value="Canada (CA)">Canada (CA)</option>
<option value="United States (US)">United States (US)</option>
</NativeSelect>
</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.
'use client'
import { Field, Fieldset, Input, Textarea } from '@chakra-ui/react'
import { NativeSelect } from '#components/ui/native-select'
export const FieldsetWithInvalid = () => {
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 name="country">
<option value="United Kingdom (UK)">United Kingdom (UK)</option>
<option value="Canada (CA)">Canada (CA)</option>
<option value="United States (US)">United States (US)</option>
</NativeSelect>
</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' | 'base' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'sidebar' | 'sidebar.accent' | 'interaction' | 'accent' | 'presence' | 'status' | 'slate'The color palette of the component |
size | 'md' | 'sm' | 'md' | 'lg'The size of the component |
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. |