Form

Fieldset

Styled native <fieldset> with a <legend> caption. Setting disabled disables every form control inside.

Import

import { Fieldset } from "@zephora/react";

Contact details

<Fieldset legend="Contact details">
  <Input placeholder="Email" />
  <Input placeholder="Phone" />
</Fieldset>

The native disabled attribute cascades to every control inside.

Billing address

Same as shipping

<Fieldset legend="Billing address" disabled>
  <Input placeholder="Street" />
  <Checkbox>Same as shipping</Checkbox>
</Fieldset>

Prop	Type	Default	Description
`legend`	`ReactNode`	—	Caption rendered inside the native <legend>.
`disabled`	`boolean`	`false`	Disables every form control inside the fieldset.
`unstyled`	`boolean`	`false`	Headless mode — drops Zephora classes so your own CSS can style it.
`…rest`	`FieldsetHTMLAttributes<HTMLFieldSetElement>`	—	All native fieldset props are forwarded.