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

# TypedConfirmField

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

> Muted confirmation box that groups the label and input before a destructive action.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/TypedConfirmField.md#theme-key-TypedConfirmField-root) | 2 classes | Muted confirmation box that groups the label and input before a destructive action. |
| [label](/v3/reference/theming/keys/TypedConfirmField.md#theme-key-TypedConfirmField-label) | `text-[12px] font-medium leading-tight text-foreground` | Instruction label for the expected typed confirmation value. |
| [expectedChip](/v3/reference/theming/keys/TypedConfirmField.md#theme-key-TypedConfirmField-expectedChip) | 3 classes | Inline mono chip that echoes the exact expected value. |
| [input](/v3/reference/theming/keys/TypedConfirmField.md#theme-key-TypedConfirmField-input) | 6 classes | Mono input for the typed confirmation value, using the shared input focus-ring contract. |

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

## root

> Muted confirmation box that groups the label and input before a destructive action.

Default classes:

```text
flex flex-col gap-1.5 px-3.5 py-3 rounded-vueda-card hairline hairline-border
bg-[color-mix(in_oklab,var(--muted)_40%,var(--background))]
```

Source: `client/lib/theme/vueda-tailwind/form/TypedConfirmField.theme.js:17`

<a id="theme-key-TypedConfirmField-label"></a>

## label

> Instruction label for the expected typed confirmation value.

Default classes:

`text-[12px] font-medium leading-tight text-foreground`

Source: `client/lib/theme/vueda-tailwind/form/TypedConfirmField.theme.js:24`

<a id="theme-key-TypedConfirmField-expectedChip"></a>

## expectedChip

> Inline mono chip that echoes the exact expected value.

Default classes:

```text
inline-flex items-center px-1.5 py-0.5 mx-0.5
rounded-[3px] hairline hairline-border bg-background
font-mono text-[12px] font-semibold leading-none text-foreground
```

Source: `client/lib/theme/vueda-tailwind/form/TypedConfirmField.theme.js:28`

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

## input

> Mono input for the typed confirmation value, using the shared input focus-ring contract.

Default classes:

```text
h-8 px-2.5 w-full min-w-0
rounded-vueda-control hairline bg-background
font-mono text-[12.5px] font-medium leading-none text-foreground
placeholder:text-muted-foreground placeholder:font-normal
transition-shadow
focus-visible:hairline-ring focus-visible:focus-ring-shadow focus-visible:outline-none
```

Source: `client/lib/theme/vueda-tailwind/form/TypedConfirmField.theme.js:36`