Settings panel

Compose labeled toggles in a scoped Liquidify environment.

This pattern keeps labels in ordinary document structure and gives every switch an explicit accessible name.

import { Theme, Toggle } from "@liquidify/react"
import "@liquidify/react/styles.css"

export function SettingsPanel() {
  return (
    <Theme type="system">
      <section aria-labelledby="notification-settings">
        <h2 id="notification-settings">Notifications</h2>
        <label>
          Product updates
          <Toggle
            aria-label="Product updates"
            defaultChecked
            onChange={(checked) => console.log({ checked })}
          />
        </label>
        <label>
          Security alerts
          <Toggle aria-label="Security alerts" defaultChecked disabled />
        </label>
      </section>
    </Theme>
  )
}

Use uncontrolled state for a self-contained preference form. Use controlled state when the saved application model must remain authoritative.