3F Design v1.18.0

Form

Component names:

  • <v-form>
  • <v-input>
  • <v-select>
  • <v-checkbox>
  • <v-radio>

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-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

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet 
<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.

This is an error from ASP.NET 
<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

{
  "name": "John Doe",
  "permission": true,
  "gender": "male"
}
You have chosen '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.

← Icon →