Groups
A group in the schema groups related fields. Groups are currently output as a <fieldset> element, with a <legend>. For example, this schema:
1
{
2
groups: [
3
{
4
legend: "User Details",
5
fields: [
6
{
7
type: "input",
8
inputType: "text",
9
label: "Name",
10
model: "name"
11
},
12
{
13
type: "input",
14
inputType: "number",
15
id: "current_age",
16
label: "Age",
17
model: "age"
18
}
19
]
20
}
21
]
22
}
Copied!
would produce (simplified) HTML output something like this:
1
<fieldset>
2
<legend>User Details</legend>
3
4
<label>Name</label>
5
<input type="text" />
6
7
<label>Age</label>
8
<input type="number" />
9
</fieldset>
Copied!
You can change the default fieldset tag by passing the tag property to the <vue-form-generator /> component in your markup.
1
<vue-form-generator tag="div" :model="model" :schema="schema" :options="options"></vue-form-generator>
Copied!
Copy link