bootstrap-vue-next · VividLemon · Nov 6, 2025 · Nov 6, 2025 · Nov 6, 2025
diff --git a/apps/docs/src/data/components/formRating.data.ts b/apps/docs/src/data/components/formRating.data.ts
@@ -19,6 +19,12 @@ export default {
           default: 'false',
           description: 'When `true` makes the rating disabled',
         },
+        form: {
+          type: 'string',
+          default: undefined,
+          description:
+            'The id of the form that the rating input belongs to. If not set, the rating will be associated with the closest parent form',
+        },
         inline: {
           type: 'boolean',
           default: 'false',
@@ -30,6 +36,12 @@ export default {
           default: 0,
           description: 'The current rating value (supports v-model two-way binding).',
         },
+        name: {
+          type: 'string',
+          default: undefined,
+          description:
+            'Sets the name attribute on the hidden input element. Required for form submission',
+        },
         noBorder: {
           type: 'boolean',
           default: 'false',

diff --git a/packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.spec.ts b/packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.spec.ts
@@ -261,3 +261,86 @@ it('does not render clear when readonly is true', () => {
   expect(wrapper.find('.clear-button-spacing').exists()).toBe(false)
   expect(wrapper.find('#slot-should-not-render').exists()).toBe(false)
 })
+
+// Form submission tests
+it('renders hidden input when name prop is provided', () => {
+  const wrapper = mount(BFormRating, {
+    props: {
+      name: 'rating',
+      modelValue: 3,
+    },
+  })
+  const hiddenInput = wrapper.find('input[type="hidden"]')
+  expect(hiddenInput.exists()).toBe(true)
+  expect(hiddenInput.attributes('name')).toBe('rating')
+  expect(hiddenInput.attributes('value')).toBe('3')
+})
+
+it('does not render hidden input when name prop is not provided', () => {
+  const wrapper = mount(BFormRating, {
+    props: {
+      modelValue: 3,
+    },
+  })
+  const hiddenInput = wrapper.find('input[type="hidden"]')
+  expect(hiddenInput.exists()).toBe(false)
+})
+
+it('does not render hidden input when disabled is true', () => {
+  const wrapper = mount(BFormRating, {
+    props: {
+      name: 'rating',
+      modelValue: 3,
+      disabled: true,
+    },
+  })
+  const hiddenInput = wrapper.find('input[type="hidden"]')
+  expect(hiddenInput.exists()).toBe(false)
+})
+
+it('hidden input updates when rating value changes', async () => {
+  const wrapper = mount(BFormRating, {
+    props: {
+      name: 'rating',
+      modelValue: 3,
+    },
+  })
+  const hiddenInput = wrapper.find('input[type="hidden"]')
+  expect(hiddenInput.attributes('value')).toBe('3')
+
+  // Click on a star to change the value
+  const [firstStar] = wrapper.findAll('.star')
+  await firstStar.trigger('click')
+  expect(hiddenInput.attributes('value')).toBe('1')
+})
+
+it('renders hidden input with form attribute when provided', () => {
+  const wrapper = mount(BFormRating, {
+    props: {
+      name: 'rating',
+      form: 'my-form',
+      modelValue: 4,
+    },
+  })
+  const hiddenInput = wrapper.find('input[type="hidden"]')
+  expect(hiddenInput.exists()).toBe(true)
+  expect(hiddenInput.attributes('name')).toBe('rating')
+  expect(hiddenInput.attributes('form')).toBe('my-form')
+  expect(hiddenInput.attributes('value')).toBe('4')
+})
+
+it('hidden input value is 0 when rating is cleared', async () => {
+  const wrapper = mount(BFormRating, {
+    props: {
+      name: 'rating',
+      modelValue: 3,
+      showClear: true,
+    },
+  })
+  const hiddenInput = wrapper.find('input[type="hidden"]')
+  expect(hiddenInput.attributes('value')).toBe('3')
+
+  const clearBtn = wrapper.find('.clear-button-spacing')
+  await clearBtn.trigger('click')
+  expect(hiddenInput.attributes('value')).toBe('0')
+})
diff --git a/packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.vue b/packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.vue
@@ -10,6 +10,14 @@
     tabindex="0"
     @keydown="onKeydown"
   >
+    <input
+      v-if="props.name && !props.disabled"
+      key="hidden"
+      type="hidden"
+      :name="props.name"
+      :form="props.form"
+      :value="localValue"
+    />
     <span
       v-if="props.showClear && !props.readonly && !props.disabled"
       class="clear-button-spacing"
@@ -91,6 +99,8 @@ const _props = withDefaults(defineProps<Omit<BFormRatingProps, 'modelValue'>>(),
   precision: 0,
   readonly: false,
   disabled: false,
+  form: undefined,
+  name: undefined,
   showClear: false,
   showValue: false,
   showValueMax: false,

diff --git a/packages/bootstrap-vue-next/src/types/ComponentProps.ts b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
@@ -400,6 +400,8 @@ export interface BFormRatingProps {
   precision?: number
   readonly?: boolean
   disabled?: boolean
+  form?: string
+  name?: string
   showClear?: boolean
   showValue?: boolean
   showValueMax?: boolean