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

# FieldSetRange

## Overview

Composite field that renders a pair of sub-fields for the lower and upper
boundaries of a range, deriving their field names from the parent field name
combined with the configured suffixes. Validates that the lower bound does
not exceed the upper bound.

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

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <span id="prop-iconOverride">iconOverride</span> | `Object` |  | `null` | A partial icon registry (`{ [componentName]: { [iconName]: { component, props } } }`) merged with inherited and default icon entries; scopes icon overrides to this component and its descendants. |
| <span id="prop-name">name</span> | `String` | yes |  | The field name, used as the path to look up and store the value in the form state. |
| <span id="prop-formModelName">formModelName</span> | `String` |  | `undefined` | The name of the form model for configuration lookup; usually provided by a parent field renderer. |
| <span id="prop-clearServerErrorDependents">clearServerErrorDependents</span> | `Array` |  | `() => []` | Other fields whose server errors should be cleared when this field's value changes. |
| <span id="prop-validationDependencies">validationDependencies</span> | `Array` |  | `() => []` | Other field paths this field depends on; their values are passed to validation and required functions. |
| <span id="prop-readOnly">readOnly</span> | `Boolean` |  | `false` | Whether the field is read-only; disables editing and skips required validation. |
| <span id="prop-required">required</span> | `Boolean` |  | `null` | Whether the field is required. |
| <span id="prop-requiredMessage">requiredMessage</span> | `String` |  | `"This field is required."` | Error message shown when a required field is left empty. |
| <span id="prop-shouldRequireFn">shouldRequireFn</span> | `Function` |  | `null` | Custom function called with resolved field dependency values; determines whether the field should be required. |
| <span id="prop-isRequiredViolation">isRequiredViolation</span> | `Function` |  | `null` | Custom function called with the current field value; checks whether the value violates the required rule. Defaults to rejecting null, undefined, empty string, false, and 0. |
| <span id="prop-validate">validate</span> | `Function` |  | `null` | Custom validation function called with the current field value and resolved field dependency values; should return true when valid or an error message string when invalid. |
| <span id="prop-label">label</span> | `String` |  | `null` | The label shown next to the field; defaults to the field name when omitted. |
| <span id="prop-help">help</span> | `String` |  | `""` | Help text displayed alongside the field. |
| <span id="prop-modelValue">modelValue</span> | `String\|Number\|Boolean\|Array\|Object` |  | `undefined` | The field's external model value; used only in contextless mode (v-model binding). |
| <span id="prop-contextless">contextless</span> | `Boolean` |  | `false` | When true, the field ignores any surrounding form context and manages its own state. |
| <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-type">type</span> | `string` |  | `"number"` | The data type of the range boundaries (e.g. "number" or "date"). |
| <span id="prop-suffixes">suffixes</span> | `array` |  | `["lower", "upper"]` | A two-element array of suffixes appended to the field name to produce the lower and upper boundary field names; must be provided in lower, upper order. |

## Slots

| Name | Scoped | Description |
| --- | --- | --- |
| `separator` |  | Replaces the glyph rendered between the lower and upper sub-fields. |
| `field-set-level-chores` |  | Override the validation block rendered below the range sub-fields. |

[Full slot reference](/v3/reference/api/vue/FieldSetRange/slots.md)

## Events

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

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

## Source

`client/lib/form/field-set/FieldSetRange.vue`