3F Design v1.21.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
submitting Boolean Indicates wether or not the form is submitting.
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 -

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 -

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 -

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

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

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

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

Client side POST request

{
  "submitting": false,
  "response": null
}
<div class="app">
  <v-form v-slot="form" method="POST" action="http://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">Save button</v-button>
      <!-- Status messages (change to toasts) -->
      <v-text v-if="form.submitting">Saving...</v-text>
      <v-text v-else-if="form.response && form.response.ok">Changes have been saved.</v-text>
      <v-text v-else-if="form.response && !form.response.ok">Something went wrong.</v-text>
    </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

Trigger request from event

{
  "submitting": false,
  "response": null
}
<div class="app">
  <v-form v-slot="form" method="POST" action="http://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>
    <!-- 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

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

← Icon →