State Management

Rokkit components use Svelte 5's $state and $bindable runes for clean, predictable state management. Every component follows the same binding pattern.

Value Binding

All selection components expose a value prop that can be bound. The value corresponds to the value field from your data (or the item itself for primitives):

Change Events

Use onchange or onselect for side effects when selection changes. The callback receives the new value:

Controlled vs Uncontrolled

Components work in both modes:

• Uncontrolled — Omit bind:value. The component manages its own state internally. Use onchange to react to changes.
• Controlled — Use bind:value to sync state with your application. The component and your state stay in sync automatically.

Multi-Selection

MultiSelect binds an array of values:

Tabs and Toggle

Tabs and Toggle also use bind:value with the same pattern:

Related

• Field Mapping — How value is resolved from data
• Forms — Schema-driven form state