Component names:
<v-form>
<v-input>
<v-select>
<v-checkbox>
<v-radio>
<v-toggle>
Examples
Basic
<div class="app">
<v-form>
<v-input class="mb-5" placeholder="Navn"></v-input>
<v-input class="mb-5" placeholder="E-mail"></v-input>
<v-input class="mb-5" placeholder="Disabled" disabled></v-input>
<v-textarea class="mb-5" placeholder="Textarea eksempel"></v-textarea>
<v-select class="mb-5" placeholder="Dropdown eksempel">
<v-option value="0">Valgmulighed 1</v-option>
<v-option value="1">Valgmulighed 2</v-option>
<v-option value="2">Valgmulighed 3</v-option>
<v-option value="3">Valgmulighed 4</v-option>
<v-option value="4">Valgmulighed 5</v-option>
</v-select>
<div class="mb-5">
<v-checkbox class="mb-3" placeholder="Checkbox eksempel" checked></v-checkbox>
<v-checkbox class="mb-3" placeholder="Checkbox eksempel"></v-checkbox>
<v-checkbox placeholder="Checkbox eksempel (disabled)" checked disabled></v-checkbox>
</div>
<div class="mb-5">
<v-radio name="radio" class="mb-3" placeholder="Radio eksempel" checked></v-radio>
<v-radio name="radio" class="mb-3" placeholder="Radio eksempel"></v-radio>
<v-radio name="radio" placeholder="Radio eksempel (disabled)" disabled></v-radio>
</div>
<div class="mb-5">
<v-toggle class="mb-3" placeholder="Toggle eksempel" checked></v-toggle>
<v-toggle class="mb-3" placeholder="Toggle eksempel"></v-toggle>
<v-toggle placeholder="Toggle eksempel (disabled)" checked disabled></v-toggle>
</div>
</v-form>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Errors and helper texts
<div class="app">
<v-form>
<v-input class="mb-5" placeholder="Field with description" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."></v-input>
<v-input placeholder="Field with error" value="Consectetur adipiscing" error="Lorem ipsum dolor sit amet"></v-input>
</v-form>
</div>
1
2
3
4
5
6
Handle ASP.NET errors
ASP.NET uses its own CSS classes, such as input-validation-error
and field-validation-error
which contains explanatory text for the error. If you provide child content to v-input
it will be considered an error description.
<div class="app">
<v-form>
<v-input placeholder="Field name" value="Lorem ipsum">
<span class="field-validation-error error">
This is an error from ASP.NET
</span>
</v-input>
</v-form>
</div>
1
2
3
4
5
6
7
8
9
State management
<div class="app">
<v-data v-slot="state" :data="{ name: 'John Doe', permission: true, gender: 'male' }">
<v-form>
<v-input class="mb-5" placeholder="Enter name" :value="state.name" @input="state.name = $event.target.value"></v-input>
<v-checkbox class="mb-5" placeholder="Permission" :checked="state.permission === true" @input="state.permission = $event.target.checked"></v-checkbox>
<div class="mb-5">
<v-radio class="mb-3" placeholder="Male" :checked="state.gender === 'male'" @input="state.gender = 'male'"></v-radio>
<v-radio placeholder="Female" :checked="state.gender === 'female'" @input="state.gender = 'female'"></v-radio>
</div>
<pre style="color: #fff;">{{JSON.stringify(state, null, 2)}}</pre>
<v-card class="mt-5">
<div v-if="state.gender === 'male'">You have chosen 'Male' 👨</div>
<div v-if="state.gender === 'female'">You have chosen 'Female' 👩</div>
</v-card>
</v-form>
</v-data>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
API
Name | Type | Description | Default |
placeholder | String | Label that describes the form element | - |
description | String | Helper text | - |
error | String | Error message | - |
Notice
All other properties that are not defined above, will be passed to the component as html attributes. This is especially useful for adding the class
attribute.