---
url: "https://vueda.dev/v3/reference/theming/keys/WidgetReadOnly.md"
title: "WidgetReadOnly"
---

# WidgetReadOnly

Source: `client/lib/theme/vueda-tailwind/widgets/index.js`

> The root has no chrome because read-mode rows are owned by the field shell.

Vue component: [WidgetReadOnly](/v3/reference/api/vue/WidgetReadOnly.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/WidgetReadOnly.md#theme-key-WidgetReadOnly-root) |  | The root has no chrome because read-mode rows are owned by the field shell. |
| [inner](/v3/reference/theming/keys/WidgetReadOnly.md#theme-key-WidgetReadOnly-inner) | callback | The inner wrapper collapses when hidden and stacks visible read-only content. |
| [input](/v3/reference/theming/keys/WidgetReadOnly.md#theme-key-WidgetReadOnly-input) | `ml-2` | The input slot indents read-only control fragments to align with editable widgets. |
| [value](/v3/reference/theming/keys/WidgetReadOnly.md#theme-key-WidgetReadOnly-value) | `text-[13px]/[1.5] text-foreground` | The value text uses the read-mode record recipe. |
| [linkItem](/v3/reference/theming/keys/WidgetReadOnly.md#theme-key-WidgetReadOnly-linkItem) |  | A linked value item carries link content without adding extra chrome. |
| [textItem](/v3/reference/theming/keys/WidgetReadOnly.md#theme-key-WidgetReadOnly-textItem) |  | A plain value item mirrors [WidgetReadOnly.linkItem](/v3/reference/theming/keys/WidgetReadOnly.md#theme-key-WidgetReadOnly-linkItem) without link behavior. |
| [linkItemPrefix](/v3/reference/theming/keys/WidgetReadOnly.md#theme-key-WidgetReadOnly-linkItemPrefix) |  | Prefix content before linked values stays visually neutral. |
| [textItemPrefix](/v3/reference/theming/keys/WidgetReadOnly.md#theme-key-WidgetReadOnly-textItemPrefix) |  | Prefix content before plain values follows [WidgetReadOnly.linkItemPrefix](/v3/reference/theming/keys/WidgetReadOnly.md#theme-key-WidgetReadOnly-linkItemPrefix). |
| [linkItemSuffix](/v3/reference/theming/keys/WidgetReadOnly.md#theme-key-WidgetReadOnly-linkItemSuffix) |  | Suffix content after linked values stays visually neutral. |
| [textItemSuffix](/v3/reference/theming/keys/WidgetReadOnly.md#theme-key-WidgetReadOnly-textItemSuffix) |  | Suffix content after plain values follows [WidgetReadOnly.linkItemSuffix](/v3/reference/theming/keys/WidgetReadOnly.md#theme-key-WidgetReadOnly-linkItemSuffix). |

<a id="theme-key-WidgetReadOnly-root"></a>

## root

> The root has no chrome because read-mode rows are owned by the field shell.

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetReadOnly.theme.js:18`

<a id="theme-key-WidgetReadOnly-inner"></a>

## inner

> The inner wrapper collapses when hidden and stacks visible read-only content.

Callback:

```javascript
({ hidden }) => ({
                "flex flex-col": !hidden,
            })
```

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetReadOnly.theme.js:20`

<a id="theme-key-WidgetReadOnly-input"></a>

## input

> The input slot indents read-only control fragments to align with editable widgets.

Default classes:

`ml-2`

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetReadOnly.theme.js:26`

<a id="theme-key-WidgetReadOnly-value"></a>

## value

> The value text uses the read-mode record recipe.

Default classes:

`text-[13px]/[1.5] text-foreground`

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetReadOnly.theme.js:30`

<a id="theme-key-WidgetReadOnly-linkItem"></a>

## linkItem

> A linked value item carries link content without adding extra chrome.

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetReadOnly.theme.js:34`

<a id="theme-key-WidgetReadOnly-textItem"></a>

## textItem

> A plain value item mirrors [WidgetReadOnly.linkItem](/v3/reference/theming/keys/WidgetReadOnly.md#theme-key-WidgetReadOnly-linkItem) without link behavior.

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetReadOnly.theme.js:38`

<a id="theme-key-WidgetReadOnly-linkItemPrefix"></a>

## linkItemPrefix

> Prefix content before linked values stays visually neutral.

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetReadOnly.theme.js:42`

<a id="theme-key-WidgetReadOnly-textItemPrefix"></a>

## textItemPrefix

> Prefix content before plain values follows [WidgetReadOnly.linkItemPrefix](/v3/reference/theming/keys/WidgetReadOnly.md#theme-key-WidgetReadOnly-linkItemPrefix).

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetReadOnly.theme.js:46`

<a id="theme-key-WidgetReadOnly-linkItemSuffix"></a>

## linkItemSuffix

> Suffix content after linked values stays visually neutral.

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetReadOnly.theme.js:50`

<a id="theme-key-WidgetReadOnly-textItemSuffix"></a>

## textItemSuffix

> Suffix content after plain values follows [WidgetReadOnly.linkItemSuffix](/v3/reference/theming/keys/WidgetReadOnly.md#theme-key-WidgetReadOnly-linkItemSuffix).

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetReadOnly.theme.js:54`