---
url: "https://vueda.dev/v3/reference/api/js/use/useWidgetTheme/functions/useWidgetTheme.md"
title: "useWidgetTheme"
---

# useWidgetTheme

## Overview

Resolves the active theme function for a widget, combining validation state with any additional context.

## Signature

`useWidgetTheme(componentName, props, widgetContextState, additionalContext, keyFn)`

### Parameters

| Name | Type | Required | Description |
| --- | --- | --- | --- |
| <span id="param-componentName">componentName</span> | `string` | yes | The theme component name (must exist in the active theme). |
| <span id="param-props">props</span> | [ThemeProps](/v3/reference/api/js/use/useTheme/types/ThemeProps.md) | yes | The reactive or computed component props. |
| <span id="param-widgetContextState">widgetContextState</span> | `object` | yes | The widget context state. |
| <span id="param-additionalContext">additionalContext</span> | `object` | no | Extra reactive context entries to merge into the theme context. |
| <span id="param-keyFn">keyFn</span> | `(key: string, kwargs: object) => string` | no | Optional function to modify a key based on kwargs. |

#### widgetContextState Properties

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <span id="param-widgetContextState-adaptedValue">adaptedValue</span> | `any` |  |  | The widget’s value adapted for UI concerns. |
| <span id="param-widgetContextState-combinedLabel">combinedLabel</span> | `string` |  |  | The effective label of the widget. |
| <span id="param-widgetContextState-combinedName">combinedName</span> | `string` |  |  | The effective name of the widget, from props or field context. |
| <span id="param-widgetContextState-combinedValue">combinedValue</span> | `any` |  |  | The widget’s effective form value (local or contextual). |
| <span id="param-widgetContextState-dependencyValues">dependencyValues</span> | `object` |  |  | Dependency values from context, if any. |
| <span id="param-widgetContextState-disabled">disabled</span> | `boolean` |  |  | Whether the widget is disabled. |
| <span id="param-widgetContextState-fieldToWidget">fieldToWidget</span> | `ValueAdapter` |  |  | The value adapter for turing form  values into values suitable for UI concerns. |
| <span id="param-widgetContextState-focused">focused</span> | `boolean` |  |  | Whether the widget is currently focused. |
| <span id="param-widgetContextState-formModelName">formModelName</span> | `string` |  |  | The form model name from the field context. |
| <span id="param-widgetContextState-help">help</span> | `string` |  |  | The help text, from props or field context. |
| <span id="param-widgetContextState-readOnly">readOnly</span> | `boolean` |  |  | Whether the widget is read-only. |
| <span id="param-widgetContextState-required">required</span> | `boolean` |  |  | Whether the widget is required. |
| <span id="param-widgetContextState-touched">touched</span> | `boolean` |  |  | Whether the widget has been interacted with. |
| <span id="param-widgetContextState-validationState">validationState</span> | `object` |  |  | Validation state flags. `warning` excludes the invalid case, so the two are never both set. |
| <span id="param-widgetContextState-widgetToField">widgetToField</span> | `ValueAdapter` |  |  | The value adapter for the widget values  back into form values, for validation and submission concerns. |

### Returns

[UseThemeReturnFunction](/v3/reference/api/js/use/useTheme/types/UseThemeReturnFunction.md)

## Source

`client/lib/use/useWidgetTheme.js:18`