State and Events

Set an initial value, control it, and respond to changes.

Components manage their own state unless you pass a controlled value. A change callback lets you respond in either case.

Set the Starting Value

Use a default prop to choose the starting state. Here, Bold starts pressed and changes when you click it:

import { Toggle } from "@ui-sdk/solid/toggle"

function Example() {
  return <Toggle defaultPressed>Bold</Toggle>
}

export { Example }

The prop depends on the component: defaultPressed, defaultChecked, defaultOpen, or defaultValue.

Control the Value

Read a signal in the prop and update it in the change callback:

import { Toggle } from "@ui-sdk/solid/toggle"
import { createSignal } from "solid-js"

function Example() {
  const [pressed, setPressed] = createSignal(false)

  return (
    <>
      <Toggle pressed={pressed()} onPressedChange={setPressed}>
        Bold
      </Toggle>
      <output>{pressed() ? "On" : "Off"}</output>
    </>
  )
}

export { Example }

Clicking Bold changes both the button and the output. If the callback does not update the signal, the toggle keeps its current value.

To keep a value in the URL, set the signal in the callback, then navigate. A value that changes only when the navigation finishes leaves the component showing the old one until then, and logs a warning in development.

Other components use open and onOpenChange, or value and onValueChange. Keep signal and prop reads reactive; read them in JSX or a getter rather than saving their current value in a variable.

Respond to a Change

Callbacks such as onPressedChange receive the requested value and details.

Detail	What It Tells You
`reason`	What requested the change, such as `press` or `outside-press`. Each component lists its reasons.
`event`	The DOM event, when there is one.
`source`	`keyboard`, `mouse`, `touch`, `pen`, `virtual`, `programmatic`, or `agent`.
`cancel()`	Stops the requested change.

For example, keep a popover open when someone clicks outside it:

import {
  Popover,
  PopoverClose,
  PopoverContent,
  PopoverTitle,
  PopoverTrigger,
} from "@ui-sdk/solid/popover"

function Example() {
  function keepOpen(
    open: boolean,
    details: { reason: string; cancel: () => void }
  ) {
    if (!open && details.reason === "outside-press") {
      details.cancel()
    }
  }

  return (
    <Popover onOpenChange={keepOpen}>
      <PopoverTrigger>Details</PopoverTrigger>
      <PopoverContent>
        <PopoverTitle>Project Details</PopoverTitle>
        <p>Last updated today.</p>
        <PopoverClose>Done</PopoverClose>
      </PopoverContent>
    </Popover>
  )
}

export { Example }

The Done button still closes it. Cancellation also works when you control the value. Add debug to a root to log changes while you work.

Empty and Multiple Values

Select, Tabs, and Radio Group report null when nothing is selected. A multiple Select or Combobox uses an array. Accordion and Toggle Group always use arrays.

To change a component from outside its parts, use a Controller.