Scale input
Give a rating on a short labeled scale and, where clearing is allowed, take it back by choosing the same value again.
<script setup lang="ts">import { ref } from 'vue'import { UiField, UiScaleInput } from 'grani' const difficulty = ref(6) const rating = ref(null)</script> <template> <div class="flex w-80 max-w-full flex-col gap-6"> <UiField label="Difficulty" group> <UiScaleInput v-model="difficulty" low-label="easy" high-label="hard" /> </UiField> <UiField label="Rating" description="Empty until you decide. A click on the mark clears it." group > <UiScaleInput v-model="rating" :max="5" low-label="meh" high-label="top" /> </UiField> </div></template>
Also called rating, nps scale, likert scale, score input.
Usage
<UiScaleInput v-model="value" /> With GraniResolver in the Vite config, a template needs no import: set it up once.
API
| Name · type | Default | Description |
|---|---|---|
| Value | ||
| modelValue*number | null | The mark (v-model); null while there is no answer. | |
| Behavior | ||
| minnumber= 1 | 1 | First step of the scale. |
| maxnumber= 10 | 10 | Last step. Twelve steps at most. |
| clearableboolean= true | true | A click on the mark, Delete or Backspace clears the answer; off, an answer once given stays. |
| unitstring= "" | "" | Shown after the readout: "7 / 10 km". |
| readoutboolean= true | true | The line "mark / max" above the bar. |
| showNumbersboolean= true | true | Numbers in the segments; off for a dense row. |
| invertboolean= false | false | Reverses the thermometer: more is worse (difficulty, pain, load). |
| lowLabelstring= "" | "" | What the low end means: "easy". |
| highLabelstring= "" | "" | What the high end means: "hard". |
| Look | ||
| variantbrand | thermometer= "brand" | "brand" | brand fills with the brand; thermometer colors the fill by the mark, danger through warning to success. |
| sizexs | sm | Height of the bar on the control ladder: xs 28, sm 36. Unset, the app's size (createGrani({ size })); md is read as sm: the scale has no md. | |
| Form and access | ||
| disabledboolean= false | false | Nothing can be picked. |
| invalidboolean= false | false | Marks the control invalid: the empty segments and the frame take the danger tone. Inside UiField the error sets this. |
| requiredboolean= false | false | An answer is needed: said to a reader on the group. Not enforced by a form: the hidden input takes no validation. Inside UiField group the legend says it instead. |
| idstring | Own id of the group, for a reference from elsewhere (aria-controls, a link); a field names it by its legend. | |
| namestring | Form field name: a hidden input sends the mark; nothing is sent while there is no answer or the scale is disabled. | |
| ariaLabelstring | Accessible name of the scale when there is no UiField around. | |
Attributes: class and style stay on the outer element; the rest (native attributes, aria-*, data-testid) reach the control inside it.
When to use another component
| When you need | Take |
|---|---|
| A free number | Input numeric |
| A count of things | Stepper |
| One answer in words | Radio group segmented |
| A mark shown without editing | Progress with :step="1", in a table or on a card |