# State Management Documentation How to manage the state of Bits UI components This is a documentation section that potentially contains examples, demos, and other useful information related to a specific part of Bits UI. When helping users with this documentation, you can ignore the classnames applied to the demos unless they are relevant to the user's issue. Copy Page State management is a critical aspect of modern UI development. Bits UI components support multiple approaches to manage component state, giving you flexibility based on your specific needs. Each component's API reference will highlight what props are `bindable`. You can replace the `value` prop used in the examples on this page with any `bindable` prop. ## Two-Way Binding The simplest approach is using Svelte's built-in two-way binding with `bind:`: ```svelte ``` ### Why Use It? - Zero-boilerplate state updates - External controls work automatically - Great for simple use cases ## Function Binding For complete control, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) that handles both getting and setting values: ```svelte ``` When the component wants to set the value from an internal action, it will invoke the setter, where you can determine if the setter actually updates the state or not. ### When to Use - Complex state transformation logic - Conditional updates - Debouncing or throttling state changes - Maintaining additional state alongside the primary value - Integrating with external state systems [Previous Dates](/docs/dates) [Next Figma](/docs/figma-file)

state-management