Composition and state

Controlled state

Use value, checked or open with the matching callback to manage state in your app. To let the component manage its own state, set its initial value with defaultValue, defaultChecked or defaultOpen. Check the component's API to see which props it supports.

InlineEdit keeps edits separate from the committed value. onValueChange reports each edit, and onCommit reports the committed value. To let Escape restore the previous value, keep the committed value in value and update it in onCommit.

Slots and portals

Place Trigger and Content inside the root of Dialog, Select or DropdownMenu. Some components already add a portal or selection indicator. Check the component's API before adding another.

If a component supports asChild, pass a single child that forwards props, event handlers and its ref to the DOM element. Check the component's API before using it.

Application behavior

BoardCard shows drag states, and MediaSlot shows file states. Your app handles dragging, uploads, permissions and error recovery. The examples show where to add that logic; they do not include a backend.