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

# FieldSetRange

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

> Card shell for paired lower and upper range fields, including nested-fieldset inset chrome.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/FieldSetRange.md#theme-key-FieldSetRange-root) | 2 classes | Card shell for paired lower and upper range fields, including nested-fieldset inset chrome. |
| [inner](/v3/reference/theming/keys/FieldSetRange.md#theme-key-FieldSetRange-inner) | 2 classes | Responsive range grid that stacks on narrow viewports and splits into lower, separator, upper at `sm`. |
| [header](/v3/reference/theming/keys/FieldSetRange.md#theme-key-FieldSetRange-header) | `flex items-baseline gap-1 2xs:gap-2 mb-1` | Label row above the paired controls. |
| [separator](/v3/reference/theming/keys/FieldSetRange.md#theme-key-FieldSetRange-separator) | 2 classes | Visual separator between lower and upper bounds. |
| [title](/v3/reference/theming/keys/FieldSetRange.md#theme-key-FieldSetRange-title) | 3 classes | Compact uppercase range title. |
| [label](/v3/reference/theming/keys/FieldSetRange.md#theme-key-FieldSetRange-label) | 3 classes | Compact uppercase fallback label for the range group. See also: [FieldSetRange.title](/v3/reference/theming/keys/FieldSetRange.md#theme-key-FieldSetRange-title). |
| [field](/v3/reference/theming/keys/FieldSetRange.md#theme-key-FieldSetRange-field) |  | Wrapper around each rendered range endpoint field. |
| [choresPanel](/v3/reference/theming/keys/FieldSetRange.md#theme-key-FieldSetRange-choresPanel) | 3 classes | Fieldset-level description and messages panel below the paired controls. |

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

## root

> Card shell for paired lower and upper range fields, including nested-fieldset inset chrome.

Default classes:

```text
bg-card border-hairline rounded-vueda-card overflow-clip p-3
[[data-vueda-fieldset]_&]:border-0 [[data-vueda-fieldset]_&]:shadow-[inset_0_0_0_var(--vueda-hairline-width)_var(--border)]
```

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

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

## inner

> Responsive range grid that stacks on narrow viewports and splits into lower, separator, upper at `sm`.

Default classes:

```text
grid items-center gap-1 2xs:gap-2
grid-cols-1 sm:grid-cols-[1fr_16px_1fr]
```

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

<a id="theme-key-FieldSetRange-header"></a>

## header

> Label row above the paired controls.

Default classes:

`flex items-baseline gap-1 2xs:gap-2 mb-1`

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

<a id="theme-key-FieldSetRange-separator"></a>

## separator

> Visual separator between lower and upper bounds.

Default classes:

```text
hidden sm:flex items-center justify-center text-muted-foreground
h-8 w-4 select-none leading-none
```

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

<a id="theme-key-FieldSetRange-title"></a>

## title

> Compact uppercase range title.

Default classes:

```text
text-[length:var(--vueda-text-micro)] font-semibold uppercase tracking-[0.06em]
leading-none
text-muted-foreground
```

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

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

## label

> Compact uppercase fallback label for the range group. See also: [FieldSetRange.title](/v3/reference/theming/keys/FieldSetRange.md#theme-key-FieldSetRange-title).

Default classes:

```text
text-[length:var(--vueda-text-micro)] font-semibold uppercase tracking-[0.06em]
leading-none
text-muted-foreground
```

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

<a id="theme-key-FieldSetRange-field"></a>

## field

> Wrapper around each rendered range endpoint field.

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

<a id="theme-key-FieldSetRange-choresPanel"></a>

## choresPanel

> Fieldset-level description and messages panel below the paired controls.

Default classes:

```text
-mx-3 -mb-3 mt-3 px-3 py-2 border-t-hairline
bg-[color-mix(in_oklab,var(--muted)_15%,var(--card))]
flex flex-col gap-1
```

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