@primereact/mcp 11.0.0-rc.2

package/data/llms/primitive/components/fieldset.md

@@ -0,0 +1,183 @@
+# Fieldset
+
+An unstyled, accessible fieldset component with semantic legend and optional collapsible content.
+
+<DocPrimitiveIntro description="Build fully custom fieldset containers with complete control over layout and styling." />
+
+```tsx
+'use client';
+import { Minus } from '@primeicons/react/minus';
+import { Plus } from '@primeicons/react/plus';
+import { Fieldset } from 'primereact/fieldset';
+import styles from './basic-demo.module.css';
+
+export default function BasicDemo() {
+    return (
+        <Fieldset.Root className={styles.root}>
+            <Fieldset.Legend className={styles.legend}>
+                <Fieldset.Trigger className={styles.trigger}>
+                    <Fieldset.Indicator match="open" className={styles.indicator}>
+                        <Minus />
+                    </Fieldset.Indicator>
+                    <Fieldset.Indicator match="closed" className={styles.indicator}>
+                        <Plus />
+                    </Fieldset.Indicator>
+                    <Fieldset.Title className={styles.title}>Legend</Fieldset.Title>
+                </Fieldset.Trigger>
+            </Fieldset.Legend>
+            <Fieldset.Content className={styles.content}>
+                <div className={styles.contentInner}>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+                    enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                </div>
+            </Fieldset.Content>
+        </Fieldset.Root>
+    );
+}
+```
+
+<DocPrimitiveLinks name="Fieldset" />
+
+## Features
+
+- Compound component API with six sub-components: `Root`, `Legend`, `Title`, `Trigger`, `Indicator`, `Content`
+- Semantic `fieldset`/`legend` HTML structure for native form grouping
+
+## Usage
+
+```tsx
+import { Fieldset } from 'primereact/fieldset';
+```
+
+```tsx
+<Fieldset.Root>
+    <Fieldset.Legend>
+        <Fieldset.Trigger>
+            <Fieldset.Indicator />
+            <Fieldset.Title />
+        </Fieldset.Trigger>
+    </Fieldset.Legend>
+    <Fieldset.Content />
+</Fieldset.Root>
+```
+
+## Behavior
+
+### Motion Animation
+
+Use `motionProps` on `Root` to configure open/close animations.
+
+```tsx
+<Fieldset.Root motionProps={{ name: 'p-collapsible', cssVarPrefix: 'fieldset-content', hideStrategy: 'none' }}>...</Fieldset.Root>
+```
+
+See [Motion](/docs/primitive/components/motion) for animation phases, CSS variables, and hide strategies.
+
+### Polymorphic Rendering
+
+Use `as` on any sub-component to change the rendered HTML element.
+
+```tsx
+<Fieldset.Root as="div">
+    <Fieldset.Legend as="div">
+        <Fieldset.Title as="h3">...</Fieldset.Title>
+    </Fieldset.Legend>
+    <Fieldset.Content as="section">...</Fieldset.Content>
+</Fieldset.Root>
+```
+
+Default elements: `Root`=`fieldset`, `Legend`=`legend`, `Title`=`span`, `Trigger`=`button`, `Content`=`div`, `Indicator`=`span`.
+
+### Render Function Children
+
+`Content` accepts a render function as children, providing access to the component instance. The instance exposes `fieldset` (root instance) and `motion` (animation state).
+
+```tsx
+<Fieldset.Content>{(instance) => <div>Fieldset is {instance.fieldset?.state.open ? 'open' : 'closed'}</div>}</Fieldset.Content>
+```
+
+## Pass Through
+
+<DocPTViewer name="fieldset-pt" components={['FieldsetRoot']} />
+
+## API
+
+### FieldsetRoot
+
+<DocTable name="FieldsetRoot" category="api" />
+
+| Attribute       | Value                  |
+| --------------- | ---------------------- |
+| `data-scope`    | `"fieldset"`           |
+| `data-part`     | `"root"`               |
+| `data-open`     | Present when expanded  |
+| `data-closed`   | Present when collapsed |
+| `data-disabled` | Present when disabled  |
+
+<DocTable name="FieldsetRoot" category="pt" />
+
+### FieldsetLegend
+
+<DocTable name="FieldsetLegend" category="api" />
+
+<DocTable name="FieldsetLegend" category="pt" />
+
+### FieldsetTitle
+
+<DocTable name="FieldsetTitle" category="api" />
+
+<DocTable name="FieldsetTitle" category="pt" />
+
+### FieldsetTrigger
+
+<DocTable name="FieldsetTrigger" category="api" />
+
+| Attribute             | Value                       |
+| --------------------- | --------------------------- |
+| `data-scope`          | `"fieldset"`                |
+| `data-part`           | `"trigger"`                 |
+| `data-content-open`   | Present when content open   |
+| `data-content-closed` | Present when content closed |
+
+<DocTable name="FieldsetTrigger" category="pt" />
+
+### FieldsetIndicator
+
+<DocTable name="FieldsetIndicator" category="api" />
+
+| Attribute     | Value                  |
+| ------------- | ---------------------- |
+| `data-scope`  | `"fieldset"`           |
+| `data-part`   | `"indicator"`          |
+| `data-open`   | Present when expanded  |
+| `data-closed` | Present when collapsed |
+
+<DocTable name="FieldsetIndicator" category="pt" />
+
+### FieldsetContent
+
+<DocTable name="FieldsetContent" category="api" />
+
+| Attribute     | Value                  |
+| ------------- | ---------------------- |
+| `data-scope`  | `"fieldset"`           |
+| `data-part`   | `"content"`            |
+| `data-open`   | Present when expanded  |
+| `data-closed` | Present when collapsed |
+
+<DocTable name="FieldsetContent" category="pt" />
+
+## Accessibility
+
+### Screen Reader
+
+Fieldset uses the semantic `fieldset` element with a `legend` for the title. This native structure provides accessible grouping without additional ARIA roles. For toggleable usage, the trigger button uses `aria-controls` to reference the content region and `aria-expanded` to reflect visibility state.
+
+### Keyboard Support
+
+| Key           | Function                                                                |
+| ------------- | ----------------------------------------------------------------------- |
+| `tab`         | Moves focus to the next focusable element in the page tab sequence.     |
+| `shift + tab` | Moves focus to the previous focusable element in the page tab sequence. |
+| `enter`       | Toggles the visibility of the content.                                  |
+| `space`       | Toggles the visibility of the content.                                  |