Skip to content

Conversation

@J-Sek
Copy link
Contributor

@J-Sek J-Sek commented Jul 26, 2025

Description:

Clamping initial value is not consistent in general - e.g. value can be loaded from API with a slight delay, and then it is not auto-corrected.

Component should respect the value, and only show error state (#21825)

Markup:

<template>
  <v-app>
    <v-container>
      <v-card class="mx-auto pa-6 my-4" style="max-width: 900px">
        <v-row>
          <v-col cols="4">
            <v-number-input v-model="model.min" label="Min" />
          </v-col>
          <v-col cols="4">
            <v-number-input v-model="model.value" label="Value" :min="model.min" :max="model.max" />
          </v-col>
          <v-col cols="4">
            <v-number-input v-model="model.max" label="Max" />
          </v-col>
        </v-row>
        <small>Note: currently only "error" state triggers when typing or changing the range</small>
        <br />
        <small>In v4: we will drop auto-clamp onMounted</small>
      </v-card>
    </v-container>
  </v-app>
</template>

<script setup lang="ts">
  import { reactive } from 'vue'

  const model = reactive({ min: 0, value: 12, max: 10 })
</script>

@J-Sek J-Sek self-assigned this Jul 26, 2025
@J-Sek J-Sek merged commit 4b4bfa5 into vuetifyjs:next Oct 8, 2025
10 checks passed
@J-Sek J-Sek deleted the fix/vnumberinput-drop-autoclamp branch October 8, 2025 13:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant