# useWidgetValue

Source: https://sdk.pdf.net/docs/v1/reference/useWidgetValue



Binds one widget's form value to the component, like a `useState` backed by the document.

```ts
const [value, setValue] = useWidgetValue(widget)
```

`widget` is a `Widget` snapshot, such as an entry of [useWidgets](https://sdk.pdf.net/docs/v1/reference/useWidgets). The value is shaped like the value of the matching HTML form control:

| Widget kind               | Value                                                           |
| ------------------------- | --------------------------------------------------------------- |
| `text`, `choice`          | `string`                                                        |
| `checkbox`, `radio`       | `boolean`: whether the widget is checked                        |
| `multiChoice`             | `readonly number[]`: selected indices in the widget's `options` |
| `pushButton`, `signature` | No value; these kinds can't be passed.                          |

## Behavior [#behavior]

* The value follows the document: form filling in the main view, changes by other collaborators, and undo/redo are reflected as they happen, and so are changes to the widget props that shape the value, such as `fieldName`, `checkedValue`, or `options`.
* The value is always read from the live document, so a stale widget snapshot is safe to pass in.
* When there is nothing to read (no stored value, the widget was deleted, or no document is loaded), the value is the empty value of the widget's kind: `''`, `false`, or `[]`.
* `setValue` throws `InvalidInputError` when the widget no longer exists or the value doesn't match the widget's kind; with no document loaded, it throws `DocumentNotLoadedError`.

## Example [#example]

```tsx
import { TextWidget, useWidgetValue } from '@sdk-pdf/react'

function TextField({ widget }: { widget: TextWidget }) {
  const [value, setValue] = useWidgetValue(widget)

  return (
    <label>
      {widget.fieldName}
      <input value={value} onChange={(event) => setValue(event.currentTarget.value)} />
    </label>
  )
}
```

See [Working with forms](https://sdk.pdf.net/docs/v1/guides/working-with-forms) for a complete form sidebar.