# Form

# Components

# Form

Component name: <v-form>

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

Code

<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.	-
success	Event	An event that will be triggered when the request received a status in the OK range (200-299). The `response` object will be passed as argument.	-
fail	Event	An event that will be triggered when the request received a status outside the OK range (200-299). The `response` object will be passed as argument.	-
error	Event	An event that will be triggered when the request fails. The `error` object will be passed as argument.	-

# Scoped Slot

For interacting with the form, we're exposing an object using Scoped slots (opens new window).

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).
reset	Function	The reset() method resets the values of all elements in the form
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>

Preview

Code

# Input API

Name	Type	Description	Default
placeholder	String	Label that describes the form element	-
description	String	Helper text	-
error	String	Error message	-
tooltip	String	Tooltip text (HTML allowed).	-
invalid	Boolean	Wether or not the field is invalid. Shows `error` message if invalid.	false
strict	Boolean	Enforce strict types. Only allows `[0-9]`, `backspace`, `arrows` & `tab` for `type="number"`.	false
cpr	Boolean	Adds validation according to cpr standards	false

General notice

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

# File

Component name: <v-file>

Preview

Code

Remember

You must specify a NAME on any <v-file> component.

You must set method="POST" on any <v-form> that has a <v-file> component.

# File 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
droppable	Boolean	Wether or not the field acts as a droppable target.	true
droppable-fullscreen	Boolean	Wether or not the entire viewport acts as a droppable target.	false
max-size	Number	Limit the total size of files selected. Max size must be specified in MB.	-
accept	String	Comma-separated list of accepted file extensions.	-

General notice

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

# Textarea

Component name: <v-textarea>

# Basic

Preview

Code

# Auto size

Preview

Code

# Character count with min and max

Preview

Code

#### 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
auto-size	Boolean	Wether or not to dynamically adjust the height to content	false
min-height	Number	Minimum textarea height. Requires `auto-size`.	-
max-height	Number	Maximum textarea height. Requires `auto-size`.	-

General notice

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

# Select

Component name: <v-select>

Preview

Code

Preview

Code

# 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
small	Boolean	Wether or not the field is smaller.	false

General notice

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

# Checkbox

Component name: <v-checkbox>

Preview

Code

Also see <v-checkbox-channels> (Mine Notifikationer)

# Checkbox API

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

General notice

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

# Radio

Component name: <v-radio-group> + <v-radio>

Preview

Code

# Radio API

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

General notice

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

# Toggle

Toggle with toggle-group

Component names: <v-toggle> <v-toggle-group>

The v-toggle-group component is used to group multiple v-toggle components together. It can be used to create a toggle group that will asure when one toggle is in loading state, the others in that group are disabled.

The v-toggle-group also has a loading-timeout prop that can be used to simulate a loading state for a specific amount of time.

Toggle composition available here

# Toggle API

Name	Type	Description	Default
`placeholder`	String	Label that describes the form element	-
`:loading-timeout`	Number	Optional prop for `<v-toggle-group>` (Mostly used for testing purpose, as the toggle state will change on timeout)	0
`loading1` `loading2` `loading3` etc.	Boolean	Optional prop for `<v-toggle>` controlling the loading state	false

General notice

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

# Searchable select

Component name: <v-searchable-select>

Please find detailed documentation here: Searchable select.

Preview

Code

Vælg et forbund

# Searchable select address

Component name: <v-searchable-select-address>

Please find detailed documentation here: Searchable select address.

Preview

Code

Adresse

# Datepicker

Component name: <v-date-picker>

Preview

Code

DD/MM/YYYY

DD/MM/YYYY HH:mm

# Datepicker API

Name	Type	Description	Default
date	Date	Selected date	-
min	Date	Minimum date allowed	-
max	Date	Maximum date allowed	-
future	Boolean	Allow only future dates to be selected. Can be used in combination with `max`	false
past	Boolean	Allow only past dates to be selected. Can be used in combination with `min`	false
placeholder	String	Label that describes the form element	-
date-time	Boolean	Enable a time picker below the calendar	false

# Supported languages

Language	ISO 639-1
Danish	da
English	en
German	de
Polish	pl
Russian	ru
Romanian	ro

# Specifying language

<script>
window.CLIENT = {
  locale: 'ru' // ISO 639-1 language code
}
</script>

1
2
3
4
5

# Date input

Preview

Code

Dato

Måned

År

ÅÅÅÅ

Nulstil input

# Examples

# Basic form

Preview

Code

Name

E-mail

Disabled

Textarea

Textarea (disabled)

Select

Select (disabled)

Searchable Select

Checkbox

Checkbox (disabled)

Radio

Radio (disabled)

Toggle

Toggle (disabled)

DD/MM/YYYY HH:mm

# 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 (opens new window).

Preview

Code

Name

Enter a name (minimum 2 characters)

Age

Enter your age (minimum 12)

Choose from list

Choose something from the list (required)

Search and choose from list

Search and choose something from the list (required)

CPR number

Enter your CPR number (XXXXXX-XXXX)

Option 1

Option 2

Option 3

Select one of the options above (required)

# Client side POST request

Preview

Code

Name

{
  "submitting": false,
  "response": null,
  "invalid": false,
  "touched": false,
  "hasInputs": true
}

# Async file upload

Preview

Code

Vælg en fil eller træk den ind her

{
  "submitting": false,
  "response": null,
  "invalid": false,
  "touched": false,
  "hasInputs": false
}

# Trigger request from event

Preview

Code

Toggle me

{
  "submitting": false,
  "response": null,
  "invalid": false,
  "touched": false,
  "hasInputs": true
}

# Errors and helper texts

Preview

Code

# 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 content to the error slot supported by most form elements it will be considered an error description.

Preview

Code

# State management

Preview

Code

Enter name

Message

Choose option

Permission

Male

Female

Person

{
  "name": "John Doe",
  "message": "Lorem ipsum dolor sit amet.",
  "permission": true,
  "gender": "none",
  "option": "Option 1"
}

# Radiobuttons med `v-infoicon` og `:checked`

Tip: Anvend :checked="true" i stedet for ":checked="1" for at undgå Vue.js fejlmeddelelser i konsollen.

Preview

Code

# Dynamically disabling/enabling submit button

Preview

Code

← Focus mode Hero Custom →

# Form

# Components

# Form

# Form API

# Scoped Slot

# Input

# Input API

# File

# File API

# Textarea

# Basic

# Auto size

# Character count with min and max

# Select

# Select API

# Checkbox

# Checkbox API

# Radio

# Radio API

# Toggle

Toggle with manual loading control

Toggle group 1 (loadingTimeout = 1 second)

Toggle group 2 (loadingTimeout = 5 seconds)

Toggles without v-toggle-group(old/existing toggles)

# Toggle API

# Searchable select

# Searchable select address

# Datepicker

# Datepicker API

# Supported languages

# Specifying language

# Date input

# Examples

# Basic form

# Validation (HTML5 validation)

# Client side POST request

# Async file upload

# Trigger request from event

# Errors and helper texts

# Handle ASP.NET errors

# State management

# Radiobuttons med v-infoicon og :checked

Vælg betalingsmetode

# Dynamically disabling/enabling submit button

Toggles without v-toggle-group
(old/existing toggles)

# Radiobuttons med `v-infoicon` og `:checked`