Fieldset Primitive
Fieldset is a Starwind Runtime primitive in the field-control-coordinator contract family. Astro and React share one semantic component API. React coordinates reactive state through controlled and default props plus callbacks. Astro renders initial state and coordinates later changes through DOM events and Runtime methods. Raw HTML uses Runtime attributes, DOM events, and imperative methods.
Anatomy
Use the Astro primitive adapter to render Fieldset anatomy with the Runtime wiring included.
---import { Fieldset } from "@starwind-ui/astro/fieldset";---
<Fieldset.Root> <Fieldset.Legend>Preferences</Fieldset.Legend></Fieldset.Root>Use the React primitive adapter when Fieldset state participates in React rendering.
import { Fieldset } from "@starwind-ui/react/fieldset";
export function Example() { return ( <Fieldset.Root> <Fieldset.Legend>Preferences</Fieldset.Legend> </Fieldset.Root> );}Render the Fieldset data-sw-* contract yourself, then initialize createFieldset.
<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.
- Default element
- fieldset
- Discovery hook
- data-sw-fieldset
- Role
- -
Props
Prop Type Default Toggle
disabled boolean false
- Description
- Disables the Root part.
- Kind
- option
- Targets
- -
- Full type
- boolean
Data Attributes
Runtime hooks
Attribute Value Description
data-sw-fieldset - Marks the Root part so Starwind Runtime can find it.
Metadata
Attribute Value Description
data-disabled - Reflects the disabled prop on the Root part.
Legend
Legend text for the Fieldset fieldset.
- Default element
- div
- Discovery hook
- data-sw-fieldset-legend
- Role
- -
Data Attributes
Runtime hooks
Attribute Value Description
data-sw-fieldset-legend - Marks the Legend part so Starwind Runtime can find it.
Runtime API
- Factory
createFieldset- Import
@starwind-ui/runtime/fieldset- Root hook
- root
data-sw-fieldset - Option props
- disabled
Option Lifecycles
| Option | Lifecycle |
|---|---|
| disabled | setter-backed |
Runtime Setters
Method Target Description
setDisabled prop: disabled Updates whether Fieldset is disabled from Runtime code.
Related Styled Components
Component Relationship
Field Composite
Changelog
View version history v1.0.0 3 releases
v1.0.0
- Promoted this Primitive's vendoring version to the stable 1.0.0 baseline. Its existing API and Runtime behavior carry forward from the previous release.
v0.1.1
- Marked generated React Primitive files as client modules so vendored installs preserve client boundaries in React server frameworks.
v0.1.0
- Introduced grouped field state with legend, disabled, invalid, and accessible description coordination.