---
url: "https://vueda.dev/v3/reference/api/vue/WidgetReadOnly.md"
title: "WidgetReadOnly"
---

# WidgetReadOnly

## Overview

Renders a field value as non-editable text, with optional prefix and suffix strings.
When `app` and `model` props are provided, the raw foreign-key value is resolved to a
human-readable name and rendered as a link to the related record's detail view.

Theme entry: [WidgetReadOnly](/v3/reference/theming/keys/WidgetReadOnly.md)

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <span id="prop-name">name</span> | `String` |  | `undefined` | The widget name; falls back to the field context value when omitted. |
| <span id="prop-label">label</span> | `String` |  | `undefined` | The label displayed next to the widget; falls back to the field context value when omitted. |
| <span id="prop-help">help</span> | `String` |  | `undefined` | Help text displayed alongside the widget; falls back to the field context value when omitted. |
| <span id="prop-readOnly">readOnly</span> | `Boolean` |  | `false` | Whether the widget is read-only; falls back to the field context value when omitted. |
| <span id="prop-required">required</span> | `Boolean` |  | `undefined, // let the default from field context take over` | Whether the widget is required; falls back to the field context value when undefined. |
| <span id="prop-modelValue">modelValue</span> | `String\|Number\|Boolean\|Array\|Object` |  | `undefined` | The widget's bound value (v-model); used only in contextless mode. |
| <span id="prop-fieldToWidget">fieldToWidget</span> | `Object\|Function` |  | `null` | Adapter that converts the form model value into a value suitable for the widget UI. |
| <span id="prop-widgetToField">widgetToField</span> | `Object\|Function` |  | `null` | Adapter that converts the widget UI value back into a form model value for validation and submission. |
| <span id="prop-invalid">invalid</span> | `Boolean` |  | `undefined` | Manually set the invalid state when not in a field context. |
| <span id="prop-warning">warning</span> | `Boolean` |  | `undefined` | Manually set the warning state when not in a field context. |
| <span id="prop-disabled">disabled</span> | `Boolean` |  | `false` | Whether the widget is disabled. |
| <span id="prop-disabledFn">disabledFn</span> | `Function` |  | `null` | A function that returns whether the widget should be disabled; takes precedence over the disabled prop. |
| <span id="prop-contextless">contextless</span> | `Boolean` |  | `false` | When true, the widget ignores any surrounding field or form context and manages its own state. |
| <span id="prop-displayDependencies">displayDependencies</span> | `Array` |  | `() => []` | Field paths whose values the widget needs for display logic; registered with the field context. |
| <span id="prop-themeOverride">themeOverride</span> | `Object` |  | `null` | A partial ThemeObject keyed by component name, merged over this component's theme and provided to descendants. |
| <span id="prop-app">app</span> | `string` |  | `undefined` | Django app label used to resolve the foreign-key value to a display name and link. |
| <span id="prop-model">model</span> | `string` |  | `undefined` | Django model name used to resolve the foreign-key value to a display name and link. |
| <span id="prop-foreignKeyObj">foreignKeyObj</span> | `object` |  | `undefined` | Pre-fetched related object; used instead of a lookup when already available. |
| <span id="prop-loading">loading</span> | `boolean` |  | `false` | When true, shows a loading indicator instead of the resolved value. |
| <span id="prop-prefix">prefix</span> | `string` |  | `""` | Static text prepended to the displayed value. |
| <span id="prop-suffix">suffix</span> | `string` |  | `""` | Static text appended to the displayed value. |
| <span id="prop-options">options</span> | `array\|boolean` |  | `false` | Static choice options used to resolve stored values to display labels. |
| <span id="prop-optionLabel">optionLabel</span> | `string` |  | `"label"` | Key on each option object used as the displayed label. |
| <span id="prop-optionValue">optionValue</span> | `string` |  | `"value"` | Key on each option object used as the stored value. |

## Slots

### `default` {#slot-default}

Scoped slot.

#### Bindings

| Name | Description |
| --- | --- |
| <span id="slot-default-param-rawValue">rawValue</span> |  |
| <span id="slot-default-param-value">value</span> |  |

## Events

| Name | Description |
| --- | --- |
| `update:modelValue` | Emitted when the widget value changes. |

[Full event reference](/v3/reference/api/vue/WidgetReadOnly/events.md)

## Source

`client/lib/widgets/WidgetReadOnly.vue`