3F Design v1.25.0

Form

Components

Form

Component name: <v-form>

The v-form component makes it easy to add validation and make client side form requests.

<div class="app">
  <v-form v-slot="form">
    <!-- Insert form elements -->
  </v-form>
</div>
1
2
3
4
5

Form API

Name Type Description Default
async Boolean Wether or not to submit the form on the client (asynchronously) or traditionally using page post (synchronously). false
with-credentials Boolean By default, cookies will not be sent or received, resulting in unauthenticated requests if the site relies on maintaining a user session. This setting allows both CORS and same origin requests to work with cookies. false
complete Event An event that will be triggered when a request has been made. The response object will be passed as argument. -

Scoped Slot

For interacting with the form, we're exposing an object using Scoped slots.

This object contains the following:

Name Type Description
invalid Boolean Indicates wether or not the form inputs are invalid.
submitting Boolean Indicates wether or not the form is submitting.
submit Function The submit() method submits the form (same as clicking the Submit button).
response Object Response object
response.ok Boolean Returns true if the request received a status in the OK range (200-299).
response.status Number Contains the status code of the response, e.g. 404 for a not found resource, 200 for a success.
response.data String/Object Will return the response content as plain text or JSON.

Input

Component name: <v-input>

<div class="app">
  <v-form>
    <v-input class="mb-5" placeholder="Name"></v-input>
    <v-input class="mb-5" placeholder="E-mail"></v-input>
    <v-input class="mb-5" placeholder="Disabled" disabled></v-input>
  </v-form>
</div>
1
2
3
4
5
6
7

Input API

Name Type Description Default
placeholder String Label that describes the form element -
description String Helper text -
error String Error message -
invalid Boolean Wether or not the field is invalid. Shows error message if invalid. false

Notice

All other properties that are not defined above, will be passed to the component as html attributes.

Textarea

Component name: <v-textarea>

<div class="app">
  <v-form>
    <v-textarea class="mb-5" placeholder="Textarea"></v-textarea>
  </v-form>
</div>
1
2
3
4
5

Textarea API

Name Type Description Default
placeholder String Label that describes the form element -
description String Helper text -
error String Error message -
invalid Boolean Wether or not the field is invalid. Shows error message if invalid. false

Notice

All other properties that are not defined above, will be passed to the component as html attributes.

Select

Component name: <v-select>

<div class="app">
  <v-form>
    <v-select class="mb-5" placeholder="Select">
      <v-option value="0">Option 1</v-option>
      <v-option value="1">Option 2</v-option>
      <v-option value="2">Option 3</v-option>
      <v-option value="3">Option 4</v-option>
      <v-option value="4">Option 5</v-option>
    </v-select>
  </v-form>
</div>
1
2
3
4
5
6
7
8
9
10
11

Select API

Name Type Description Default
placeholder String Label that describes the form element -
description String Helper text -
error String Error message -
invalid Boolean Wether or not the field is invalid. Shows error message if invalid. false

Notice

All other properties that are not defined above, will be passed to the component as html attributes.

Checkbox

Component name: <v-checkbox>

<div class="app">
  <v-form>
    <v-select class="mb-5" placeholder="Select">
      <v-option value="0">Option 1</v-option>
      <v-option value="1">Option 2</v-option>
      <v-option value="2">Option 3</v-option>
      <v-option value="3">Option 4</v-option>
      <v-option value="4">Option 5</v-option>
    </v-select>
  </v-form>
</div>
1
2
3
4
5
6
7
8
9
10
11

Checkbox API

Name Type Description Default
placeholder String Label that describes the form element -

Notice

All other properties that are not defined above, will be passed to the component as html attributes.

Radio

Component name: <v-radio>

<div class="app">
  <v-form>
    <v-radio name="radio" class="mb-3" placeholder="Radio" checked></v-radio>
    <v-radio name="radio" class="mb-3" placeholder="Radio"></v-radio>
    <v-radio name="radio" placeholder="Radio (disabled)" disabled></v-radio>
  </v-form>
</div>
1
2
3
4
5
6
7

Radio API

Name Type Description Default
placeholder String Label that describes the form element -

Notice

All other properties that are not defined above, will be passed to the component as html attributes.

Toggle

Component name: <v-toggle>

<div class="app">
  <v-form>
    <v-toggle class="mb-3" placeholder="Toggle" checked></v-toggle>
    <v-toggle class="mb-3" placeholder="Toggle"></v-toggle>
    <v-toggle placeholder="Toggle (disabled)" checked disabled></v-toggle>
  </v-form>
</div>
1
2
3
4
5
6
7

Toggle API

Name Type Description Default
placeholder String Label that describes the form element -

Notice

All other properties that are not defined above, will be passed to the component as html attributes.

Examples

Basic form

<div class="app">
  <v-form method="POST">
    <v-input class="mb-5" placeholder="Name"></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"></v-textarea>
    <v-select class="mb-5" placeholder="Select">
      <v-option value="0">Option 1</v-option>
      <v-option value="1">Option 2</v-option>
      <v-option value="2">Option 3</v-option>
      <v-option value="3">Option 4</v-option>
      <v-option value="4">Option 5</v-option>
    </v-select>
    <div class="mb-5">
      <v-checkbox class="mb-3" placeholder="Checkbox" checked></v-checkbox>
      <v-checkbox class="mb-3" placeholder="Checkbox"></v-checkbox>
      <v-checkbox placeholder="Checkbox (disabled)" checked disabled></v-checkbox>
    </div>
    <div class="mb-5">
      <v-radio name="radio" class="mb-3" placeholder="Radio" checked></v-radio>
      <v-radio name="radio" class="mb-3" placeholder="Radio"></v-radio>
      <v-radio name="radio" placeholder="Radio (disabled)" disabled></v-radio>
    </div>
    <div class="mb-5">
      <v-toggle class="mb-3" placeholder="Toggle" checked></v-toggle>
      <v-toggle class="mb-3" placeholder="Toggle"></v-toggle>
      <v-toggle placeholder="Toggle (disabled)" checked disabled></v-toggle>
    </div>
    <div class="mb-5">
      <v-button class="mr-3" tag="button">Save button</v-button>
      <v-button tag="button" inverted>Cancel</v-button>
    </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
31
32
33
34

Validation (HTML5 validation)

Form validation helps us to ensure that users fill out forms in the correct format, making sure that submitted data will work successfully with our applications. For more information, see the Constraint validation guide.

Enter a name (minimum 2 characters)
Enter your age (minimum 12)
Choose something from the list (required)
Enter your CPR number (XXXXXX-XXXX) 
<div class="app">
  <v-form v-slot="form" method="GET">
    <!-- Global form error  -->
    <div class="text-danger mb-5" v-if="form.invalid">
      Something went wrong. Please correct the fields below.
    </div>
    <!-- Text field validation -->
    <v-input
      class="mb-5"
      type="text"
      name="name"
      placeholder="Name"
      description="Enter a name (minimum 2 characters)"
      error="Enter a valid name (minimum 2 characters)"
      minlength="2"
      required
    ></v-input>
    <!-- Number field validation -->
    <v-input
      class="mb-5"
      type="number"
      name="age"
      placeholder="Age"
      description="Enter your age (minimum 12)"
      error="Enter a valid age (minimum 12)"
      min="12"
      required
    ></v-input>
    <!-- Select field validation -->
    <v-select
      class="mb-5"
      name="select"
      placeholder="Choose from list"
      description="Choose something from the list (required)"
      error="Choose something from the list (required)"
      required
    >
      <v-option value="0">Option 1</v-option>
      <v-option value="1">Option 2</v-option>
      <v-option value="2">Option 3</v-option>
      <v-option value="3">Option 4</v-option>
      <v-option value="4">Option 5</v-option>
    </v-select>
    <!-- Regex field validation -->
    <v-input
      class="mb-5"
      type="text"
      name="cpr"
      placeholder="CPR number"
      description="Enter your CPR number (XXXXXX-XXXX)"
      error="Enter a valid CPR number (XXXXXX-XXXX)"
      pattern="^[0-9]{6}-[0-9]{4}$"
      required
    ></v-input>
    <v-button tag="button">Save button</v-button>
  </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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

Client side POST request

{
  "submitting": false,
  "response": null,
  "invalid": false
}
<div class="app">
  <v-form v-slot="form" method="POST" action="https://www.mocky.io/v2/5d81366f300000690069959a?mocky-delay=500ms" async>
    <v-input name="name" class="mb-5" placeholder="Name"></v-input>
    <div class="d-flex align-items-center mb-5">
      <v-button class="mr-3" tag="button" :loading="form.submitting">Save button</v-button>
      <v-toast v-if="form.response && form.response.ok" success>
        Changes have been saved.
      </v-toast>
      <v-toast v-else-if="form.response && !form.response.ok" error>
        Something went wrong.
      </v-toast>
    </div>
    <!-- JSON view -->
    <pre class="m-0" style="color: #fff;">{{JSON.stringify(form, null, 2)}}</pre>
  </v-form>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Trigger request from event

{
  "submitting": false,
  "response": null,
  "invalid": false
}
<div class="app">
  <v-form v-slot="form" method="POST" action="https://www.mocky.io/v2/5d81366f300000690069959a?mocky-delay=500ms" async>
    <v-toggle class="mb-5" name="toggle" value="true" placeholder="Toggle me" @input="form.submit()"></v-toggle>
    <v-toast v-if="!form.submitting && form.response && form.response.ok" success>
      Changes have been saved.
    </v-toast>
    <v-toast v-else-if="!form.submitting && form.response && !form.response.ok" error>
      Something went wrong.
    </v-toast>
    <!-- JSON view -->
    <pre class="m-0" style="color: #fff;">{{JSON.stringify(form, null, 2)}}</pre>
  </v-form>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13

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" invalid></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

Dynamically disabling/enabling submit button

<div class="app">
  <v-data v-slot="state" :data="{ permission: false }">
    <v-form>
      <v-checkbox class="mb-5" placeholder="I promise to address Kasper Neist as 'sir'" :checked="state.permission === true" @input="state.permission = $event.target.checked"></v-checkbox>
      <v-button tag="button" :disabled="state.permission === false">Make promise</v-button>
    </v-form>
  </v-data>
</div>
1
2
3
4
5
6
7
8

← Icon →