Controlled state

Stateful Liquidify controls follow React's controlled/uncontrolled split.

• Use value, checked, or open when the application owns the state.
• Use the corresponding defaultValue, defaultChecked, or defaultOpen when the component should initialize and own it.
• Handle the matching change callback to observe or accept transitions.

import { useState } from "react"
import { Toggle } from "@liquidify/react"

export function NotificationsSetting() {
  const [enabled, setEnabled] = useState(false)
  return (
    <Toggle
      aria-label="Notifications"
      checked={enabled}
      onChange={setEnabled}
    />
  )
}

Do not switch one mounted instance between controlled and uncontrolled ownership. In server-rendered applications, ensure the server and first client render receive the same initial value to avoid hydration mismatches.

Callbacks report requested user transitions; controlled props remain the source of truth. Update the controlled value to accept the transition. Component pages list the exact callback names and payloads because not every control uses the same value shape.