How to create an input error border around more than 1 field?

[AlexZ-343]

I am using vee-validate along with yup.

For my form, I currently create an error border like this:

<div>
  <Field :name="someRequiredField" v-slot="{field, meta}">
    <input
      v-bind="field"
      class="bg-gray-100 text-xl p-2 w-3/5"
      :class="{'input-error': meta.touched && !meta.valid}"
      :placeholder="some placeholder"
    />
  </Field>
</div>
<ErrorMessage :name="name" class="error-feedback" />

This works great when the validation is just for one field.

However, I have a scenario where there are two checkboxes. The validation is that at least one box needs to be checked. I would also like the red border box to wrap around both checkboxes, like so:

Desired error box:

The v-slot is scoped within the Field tag, but I want the input tag to be outside. Also, on yup, I am making a validation rule against parentCheck, while the individual fields have form names like parentCheck.checkbox1 and parentCheck.checkbox2. What's the best way to apply the input border?

[logaretm]

but I want the input tag to be outside

Not sure what you mean by this. can you elaborate?

Would be nice seeing an example of the end result, even if sketched.

[sschneider-ihre-pvs]

I understood this like the following