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

# FieldLabel

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

> The label text or label-card wrapper for a field. It handles disabled opacity, nested control-card framing, and checked-state tint for label-wrapped choices.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/FieldLabel.md#theme-key-FieldLabel-root) | 3 classes | The label text or label-card wrapper for a field. It handles disabled opacity, nested control-card framing, and checked-state tint for label-wrapped choices. |

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

## root

> The label text or label-card wrapper for a field. It handles disabled opacity, nested control-card framing, and checked-state tint for label-wrapped choices.

Default classes:

```text
group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50
has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border-hairline [&>*]:data-[slot=field]:p-4
has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10
```

Source: `client/lib/theme/vueda-tailwind/shell/FieldLabel.theme.js:18`