Component names:
<v-form>
<v-input>
<v-select>
<v-checkbox>
<v-radio>
Examples Basic
Textarea eksempel
Dropdown eksempel Valgmulighed 1 Valgmulighed 2 Valgmulighed 3 Valgmulighed 4 Valgmulighed 5 < 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-textarea class = " mb-5" placeholder = " Textarea eksempel" > </ v-textarea>
< v-select class = " mb-5" placeholder = " Dropdown eksempel" >
< v-option> Valgmulighed 1</ v-option>
< v-option> Valgmulighed 2</ v-option>
< v-option> Valgmulighed 3</ v-option>
< v-option> Valgmulighed 4</ v-option>
< v-option> 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" checked disabled > </ v-checkbox>
</ div>
< div class = " mb-5" >
< v-radio name = " radio" class = " mb-3" placeholder = " Radio eksempel" > </ v-radio>
< v-radio name = " radio" class = " mb-3" placeholder = " Radio eksempel" > </ v-radio>
< v-radio name = " radio" placeholder = " Radio eksempel" disabled checked > </ v-radio>
</ 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
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
State management
{
"name": "John Doe",
"permission": true,
"gender": "male"
} < 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.