oa/documentation/elements/forms/range-rating/range-rating-sizes-documentation.md

state

state
input 3

Adjusting the size

You can adjust the size of the rating component by using the size prop which

<script setup lang="ts">

const input = ref(2)
</script>

<template>
  <div
    class="is-flex is-justify-content-space-between is-flex-wrap-wrap"
    :style="{ gap: '2rem' }"
  >
    <VField>
      <VControl>
        <VRangeRating
          v-model="input"
          label="Small"
          size="small"
        />
      </VControl>
    </VField>
    <VField>
      <VControl>
        <VRangeRating v-model="input" label="Default" />
      </VControl>
    </VField>
    <VField>
      <VControl>
        <VRangeRating
          v-model="input"
          label="Medium"
          size="medium"
        />
      </VControl>
    </VField>
    <VField>
      <VControl>
        <VRangeRating
          v-model="input"
          label="Large"
          size="large"
        />
      </VControl>
    </VField>
    <VField>
      <VControl>
        <VRangeRating
          v-model="input"
          label="XLarge"
          size="xlarge"
        />
      </VControl>
    </VField>
  </div>
</template>