Fieldset

A set of form controls optionally grouped under a common name.

Contact detailsPlease provide your contact details below.

Name

Email address

Country

Usage

import { Fieldset } from "chakra-ui-solid";

<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.

Shipping details

Street address

Country

Delivery notes

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.

Shipping details

Street address

Country

Notes

Some fields are invalid. Please check them.

Props

Root

FieldsetRootProps
Prop	Default	Type
`disabled`	`false`	`boolean` Whether every control inside is disabled. It is the native `fieldset` attribute, so the browser disables the controls; the `Field`s below also read it and mark themselves disabled.
`id`	—	`string` Seeds every id the fieldset hands out — the legend is `fieldset::{id}::legend`, the two texts `fieldset::{id}::helper-text` and `::error-text`. Defaults to a generated id. It names no element itself: the `fieldset` carries no `id` of its own, upstream included.
`invalid`	`false`	`boolean` Whether the group as a whole failed validation — it is what makes the `ErrorText` render, and what adds that text to the group's `aria-describedby`. Each control inside stays valid until it is told otherwise: pass `invalid` to the `Field.Root`s that are actually in error.
`size`	`'md'`	`ConditionalValue<'sm' \| 'md' \| 'lg' \| PresetVariant<'fieldset', 'size'>>` The gap between the legend, the texts and the content, and the two texts' type scale.

Plus Omit<HTMLChakraProps<"fieldset">, "id" | "disabled"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.