Fieldset

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

Anatomy

<Fieldset.Root>
  <Fieldset.Legend />
  <Fieldset.HelperText />
  <Fieldset.ErrorText />
</Fieldset.Root>

Examples

The Fieldset component provides contexts such as invalid and disabled for form elements. While most Ark UI components natively support these contexts, you can also use the Field component with standard HTML form elements.

Basic

Field

This example demonstrates how to use the Field component with a standard input field within a Fieldset.

Checkbox

This example shows how to use the Fieldset component with other Ark UI form elements like Checkbox.

Root Provider

An alternative way to control the fieldset is to use the RootProvider component and the useFieldset hook. This way you can access the state and methods from outside the component.

Input with Select

This example shows how to use the Fieldset component with Field.Input and Select to create a interactive phone input component.

API Reference

Root

Renders a <fieldset> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`invalid`		`boolean` Indicates whether the fieldset is invalid.

ErrorText

Renders a <span> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

HelperText

Renders a <span> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Legend

Renders a <legend> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

RootProvider

Renders a <fieldset> element.

Prop	Default	Type
`value`		`{ refs: { rootRef: RefObject<HTMLFieldSetElement \| null>; }; disabled: boolean; invalid: boolean; getRootProps: () => Omit<DetailedHTMLProps<FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref">; getLegendProps: () => Omit<...>; getHelperTextProps: () => Omit<...>; getErrorTextProps: () => Omit<....`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.