CheckboxGroup Primitive
CheckboxGroup is a Starwind Runtime primitive in the controlled-value-group contract family.
Anatomy
Use the Astro primitive adapter to render CheckboxGroup anatomy with the Runtime wiring included.
---import { CheckboxGroup } from "@starwind-ui/astro/checkbox-group";---
<CheckboxGroup.Root />Use the React primitive adapter when CheckboxGroup state participates in React rendering.
import { CheckboxGroup } from "@starwind-ui/react/checkbox-group";
export function Example() { return ( <CheckboxGroup.Root /> );}Render the CheckboxGroup data-sw-* contract yourself, then initialize createCheckboxGroup.
<div data-sw-checkbox-group role="group"></div>
<script type="module"> import { createCheckboxGroup } from "@starwind-ui/runtime/checkbox-group";
const root = document.querySelector("[data-sw-checkbox-group]"); if (root) { createCheckboxGroup(root); }</script>API Reference
Root
The main element that owns the CheckboxGroup Runtime instance.
- Default element
- div
- Discovery hook
- data-sw-checkbox-group
- Role
- group
Props
Prop Type Default Toggle
value CheckboxGroupValue -
- Description
- Controls the current CheckboxGroup value.
- Kind
- control
- Targets
- -
- Full type
- CheckboxGroupValue
defaultValue CheckboxGroupValue -
- Description
- Sets the initial CheckboxGroup value for uncontrolled usage.
- Kind
- control
- Targets
- -
- Full type
- CheckboxGroupValue
disabled boolean false
- Description
- Disables the Root part.
- Kind
- option
- Targets
- -
- Full type
- boolean
onValueChange (value: CheckboxGroupValue, details: CheckboxGroupValueChangeDetails) => void -
- Description
- Runs when the CheckboxGroup value changes.
- Kind
- callback
- Targets
- -
- Full type
- (value: CheckboxGroupValue, details: CheckboxGroupValueChangeDetails) => void
Events
Event Callback Value Toggle
valueChange onValueChange value: CheckboxGroupValue
- Description
- Fires when the value changes for CheckboxGroup.
- DOM event
- starwind:value-change
- Details type
- CheckboxGroupValueChangeDetails
- Timing
- before-state-commit
- Cancelable
- Yes
State
State Type Props Toggle
value CheckboxGroupValue value / defaultValue
- Description
- Tracks the current CheckboxGroup value.
- Initial attribute
- data-default-value
- Runtime getter
- getValue
- Runtime setter
- setValue
- State control support
- React supports controlled and default state with value and defaultValue props. Runtime/HTML reads initial state from data-default-value, emits starwind:value-change, and updates with setValue. Astro adapters render initial/default state, but do not expose reactive controlled-state props for this state.
Data Attributes
Runtime hooks
Attribute Value Description
data-sw-checkbox-group - Marks the Root part so Starwind Runtime can find it.
State
Attribute Value Description
data-value - Reflects the value state on the Root part.
Metadata
Attribute Value Description
data-default-value - Reflects the default value prop on the Root part.
data-disabled - Reflects the disabled prop on the Root part.
Runtime API
- Factory
createCheckboxGroup- Import
@starwind-ui/runtime/checkbox-group- Root hook
- root
data-sw-checkbox-group - Option props
- defaultValue, disabled, value
Runtime Setters
Method Target Description
setValue state: value Updates the current CheckboxGroup value from Runtime code.
setDisabled prop: disabled Updates whether CheckboxGroup is disabled from Runtime code.
Related Styled Components
Component Relationship
Checkbox Group Direct primitive