Fieldset Primitive
Fieldset is a Starwind Runtime primitive in the field-control-coordinator contract family. Astro, React, Vue, and Svelte components use the same underlying interactions. Each framework has its own way to read and update state. See the examples and your installed package’s types for the available props and events. Plain HTML uses DOM events and Runtime 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> );}Use the Vue components to build Fieldset.
<script setup lang="ts">import Fieldset from "@starwind-ui/vue/fieldset";</script>
<template> <Fieldset.Root> <Fieldset.Legend>Preferences</Fieldset.Legend> </Fieldset.Root></template>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
disabled boolean false
- Description
- Disables the Root part.
- Kind
- option
- Targets
- -
- Full type
- boolean
Data Attributes
Runtime hooks
Metadata
Legend
Legend text for the Fieldset fieldset.
- Default element
- div
- Discovery hook
- data-sw-fieldset-legend
- Role
- -
Data Attributes
Runtime hooks
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
Related Styled Components
Changelog
View version history v1.0.2 5 releases
v1.0.2
- Fieldset keeps its accessible label linked to its current legend when that legend changes.
- Reduced repeated JavaScript when Astro Fieldset is used with other Starwind components.
v1.0.1
- Removed obsolete private-release warnings from generated Vue adapters and normalized the resulting blank line in vendored Primitive indexes.
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.