# Fieldset Primitive

Fieldset is a Starwind Runtime primitive in the field-control-coordinator contract family.
## Anatomy
### Astro
Use the Astro primitive adapter to render Fieldset anatomy with the Runtime wiring included.
```astro
---
import { Fieldset } from "@starwind-ui/astro/fieldset";
---

<Fieldset.Root>
  <Fieldset.Legend>Preferences</Fieldset.Legend>
</Fieldset.Root>
```

### React
Use the React primitive adapter when Fieldset state participates in React rendering.
```tsx
import { Fieldset } from "@starwind-ui/react/fieldset";

export function Example() {
  return (
    <Fieldset.Root>
      <Fieldset.Legend>Preferences</Fieldset.Legend>
    </Fieldset.Root>
  );
}
```

### HTML
Render the Fieldset data-sw-* contract yourself, then initialize createFieldset.
```html
<fieldset data-sw-fieldset>
  <div data-sw-fieldset-legend>Preferences</div>
</fieldset>

<script type="module">
  import { createFieldset } from "@starwind-ui/runtime/fieldset";

  const root = document.querySelector("[data-sw-fieldset]");
  if (root) {
    createFieldset(root);
  }
</script>
```
## API Reference
### Root
The main element that owns the Fieldset Runtime instance.
| Fact | Value |
| --- | --- |
| Default element | `fieldset` |
| Discovery hook | `data-sw-fieldset` |
| Role | - |
#### Props
| Prop | Type | Default | Kind | Description |
| --- | --- | --- | --- | --- |
| disabled | `boolean` | false | option | Disables the Root part. |
#### Data Attributes
| Attribute | Source | Value | Description |
| --- | --- | --- | --- |
| `data-sw-fieldset` | runtime | - | Marks the Root part so Starwind Runtime can find it. |
| `data-disabled` | prop | - | Reflects the disabled prop on the Root part. |
#### Runtime Setters
| Method | Target | Options | Suppresses Emit | Description |
| --- | --- | --- | --- | --- |
| `setDisabled` | prop: disabled | - | No | Updates whether Fieldset is disabled from Runtime code. |
#### Refs
| Part | Public |
| --- | --- |
| root | Yes |
#### Initial Markup
| Attributes | Reason |
| --- | --- |
| `data-sw-fieldset`, `data-disabled` | Fieldsets must expose disabled grouping state before initialization so child Fields can inherit it. |

### Legend
Legend text for the Fieldset fieldset.
| Fact | Value |
| --- | --- |
| Default element | `div` |
| Discovery hook | `data-sw-fieldset-legend` |
| Role | - |
#### Data Attributes
| Attribute | Source | Value | Description |
| --- | --- | --- | --- |
| `data-sw-fieldset-legend` | runtime | - | Marks the Legend part so Starwind Runtime can find it. |
#### Refs
| Part | Public |
| --- | --- |
| legend | Yes |
#### Initial Markup
| Attributes | Reason |
| --- | --- |
| `data-sw-fieldset-legend` | The Fieldset controller associates legend ids with the root and then mirrors disabled state for styling. |
## Runtime API
| Fact | Value |
| --- | --- |
| Factory | [`createFieldset`](/docs/runtime/#create-fieldset) |
| Import | `@starwind-ui/runtime/fieldset` |
| Root part | root |
| Option props | disabled |
| Option lifecycles | disabled: setter-backed |
## Related Styled Components
| Component | Relationship |
| --- | --- |
| [Field](/docs/components/field/) | Composite |
## Exports
| Group | Import | Exports |
| --- | --- | --- |
| Runtime | `@starwind-ui/runtime/fieldset` | `createFieldset` |
| Astro Primitive | `@starwind-ui/astro/fieldset` | `Fieldset`, `FieldsetRoot`, `FieldsetLegend` |
| React Primitive | `@starwind-ui/react/fieldset` | `Fieldset`, `FieldsetRoot`, `FieldsetLegend` |
## Canonical Names
| Kind | Name |
| --- | --- |
| namespace | `Fieldset` |
| runtime-factory | `createFieldset` |
| part | `Fieldset.Root` |
| part | `Fieldset.Legend` |