Fieldset

A component used to group related form fields.

Usage

Used to group related form elements and provide a caption (legend) for the group. It also provides a shared state for its children, such as disabled or invalid.

import { Fieldset, Field, Input, Stack } from "@elemnts-ui/react";

<Fieldset.Root>
  <Stack gap="4">
    <Fieldset.Legend>Contact Details</Fieldset.Legend>
    <Fieldset.HelperText>
      Please provide your contact information.
    </Fieldset.HelperText>
    <Stack gap="3">
      <Field.Root>
        <Field.Label>Name</Field.Label>
        <Input placeholder="John Doe" />
      </Field.Root>
    </Stack>
  </Stack>
</Fieldset.Root>;

Examples

Disabled

When disabled, all of its children form fields will also be disabled.

Invalid

Apply the invalid prop to indicate that there are errors within the group.

API Reference

FieldsetRootProvider

Provides a Fieldset state machine created with useFieldset.

Prop	Type	Default
value	`UseFieldsetReturn`	required
asChild	`boolean`	`false`

FieldsetRoot

The root component for the Fieldset.

Prop	Type	Default
asChild	`boolean`	`false`
invalid	`boolean`	`false`

FieldsetLegend

The caption for the Fieldset.

Prop	Type	Default
asChild	`boolean`	`false`

FieldsetHelperText

Additional information or instructions for the Fieldset.

Prop	Type	Default
asChild	`boolean`	`false`

FieldsetErrorText

The error message for an invalid Fieldset.

Prop	Type	Default
asChild	`boolean`	`false`