How to align form components horizontally using Vuetifyjs

Question

I'm learning vuetifyjs vuejs2, and I have difficulties to write a code which does the following through vuetify:

I expect this kind of form on vuetify:

1- a form having its components horizontally

2- these components should only be 3 select boxes, with the submit button

3- having a form which send those selected items to a page

that is where I need your with examples of code on vuetify.

At the end, I should have a form having 3 select boxes filled with their options, with a submit forwarding the result to a vue.

Answer 1

For radio-buttons you can set the row attribute on the radio group like this:

<v-radio-group row v-model="radioValue">
    <v-radio value="0" :label="Value 0"></v-radio>
    <v-radio value="1" :label="Value 1"></v-radio>
    <v-radio value="2" :label="Value 2"></v-radio>
</v-radio-group>

as seen in the documentation here --> https://vuetifyjs.com/en/components/selection-controls#api