import{_ as i}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,a as n,o as l}from"./app-UjmrCZP8.js";const h={};function k(t,s){return l(),a("div",null,s[0]||(s[0]=[n(`

Basic usage

Most commonly you want the form to handle a set of data and display appropriate input fields for each piece of data.

<template>
  <ds-form
    v-model="formData"
    @submit="handleSubmit">
    <ds-input
      icon="at"
      model="email"
      label="Email"
      type="email"
      placeholder="Your email address ..."></ds-input>
    <ds-input
      icon="lock"
      model="password"
      label="Password"
      placeholder="Your password ..."></ds-input>
    <ds-space margin-top="base">
      <ds-button primary>Login</ds-button>
    </ds-space>
  </ds-form>
</template>
<script>
  export default {
    data() {
      return {
        formData: {
          email: '',
          password: ''
        }
      }
    },
    methods: {
      handleSubmit(data) {
        console.log('Submit form ...', data)
      }
    }
  }
</script>

Advanced usage / Validation

Use a schema to provide validation for the form inputs. Use scoped slots to get access to the forms errors and functions like reset.

<template>
  <ds-form
    v-model="formData"
    @submit="handleSubmit"
    @input="handleInput"
    @input-valid="handleInputValid"
    @reset="handleReset"
    :schema="formSchema">
    <template slot-scope="{ errors, reset }">
      <ds-input
        model="name"
        label="Name"
        placeholder="Your name ..."></ds-input>
      <ds-input
        icon="at"
        model="email"
        label="Email"
        type="email"
        placeholder="Your email address ..."></ds-input>
      <ds-input
        icon="at"
        model="emailConfirm"
        label="Confirm Email"
        type="email"
        placeholder="Confirm your email address ..."></ds-input>
      <ds-select
        icon="user"
        model="gender"
        label="Gender"
        :options="['male', 'female']"
        placeholder="Gender ..."></ds-select>
      <ds-select
        icon="globe"
        model="settings.languages"
        label="Language"
        :options="['en','de','fr','it']"
        multiple></ds-select>
      <ds-input
        model="settings.status"
        label="Status"
        type="textarea"
        rows="3"></ds-input>
      <ds-space margin-top="large">
        <ds-button @click.prevent="reset()">
          Reset form
        </ds-button>
        <ds-button
          :disabled="disabled"
          icon="save"
          primary>
          Save profile
        </ds-button>
      </ds-space>
    </template>
  </ds-form>
</template>
<script>
  export default {
    data() {
      return {
        formData: {
          name: 'peter',
          gender: 'male',
          email: 'peter@maffay.com',
          settings: {
            languages: ['en'],
            status: 'I spy with my little eye, a girly I can get, cause she aint get to many likes.'
          }
        },
        // https://github.com/yiminghe/async-validator
        formSchema: {
          name: { required: true, message: 'Fill in a name' },
          email: { type: 'email', required: true, message: 'Fill in a valid email' },
          emailConfirm: [
            { validator: this.matchEmail },
            // the last entry is called first ¯\\_(ツ)_/¯
            { type: 'email', required: true, message: 'Confirm your email'}
          ],
          settings: {
            type: 'object',
            fields: {
              status: { min: 20, max: 300, message: 'Write between 20 and 300 letters' }
            }
          }
        },
        disabled: true
      }
    },
    methods: {
      handleSubmit(data) {
        console.log('Submit form ...', data)
      },
      handleInput(data) {
        console.log('Input form ...', data)
        this.disabled = true
      },
      handleInputValid(data) {
        this.disabled = false
        console.log('Input-valid form ...', data)
      },
      handleReset(data) {
        console.log('Reset form ...', data)
      },

      matchEmail(rule, value, callback, source, options) {
        var errors = [];
        if(this.formData.email !== value) {
          errors.push(new Error('EMail missmatch'));
        }
        callback(errors);
      }
    }
  }
</script>
`,6)]))}const d=i(h,[["render",k],["__file","demo.html.vue"]]),r=JSON.parse(`{"path":"/styleguide/src/system/components/data-input/Form/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Basic usage","slug":"basic-usage","link":"#basic-usage","children":[]},{"level":2,"title":"Advanced usage / Validation","slug":"advanced-usage-validation","link":"#advanced-usage-validation","children":[]}],"git":{"createdTime":1775422481000,"updatedTime":1775422481000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":1.4,"words":419},"filePathRelative":"styleguide/src/system/components/data-input/Form/demo.md","localizedDate":"April 5, 2026","excerpt":"

Basic usage

\\n

Most commonly you want the form to handle a set of data and display appropriate input fields for each piece of data.

\\n
<template>\\n  <ds-form\\n    v-model=\\"formData\\"\\n    @submit=\\"handleSubmit\\">\\n    <ds-input\\n      icon=\\"at\\"\\n      model=\\"email\\"\\n      label=\\"Email\\"\\n      type=\\"email\\"\\n      placeholder=\\"Your email address ...\\"></ds-input>\\n    <ds-input\\n      icon=\\"lock\\"\\n      model=\\"password\\"\\n      label=\\"Password\\"\\n      placeholder=\\"Your password ...\\"></ds-input>\\n    <ds-space margin-top=\\"base\\">\\n      <ds-button primary>Login</ds-button>\\n    </ds-space>\\n  </ds-form>\\n</template>\\n<script>\\n  export default {\\n    data() {\\n      return {\\n        formData: {\\n          email: '',\\n          password: ''\\n        }\\n      }\\n    },\\n    methods: {\\n      handleSubmit(data) {\\n        console.log('Submit form ...', data)\\n      }\\n    }\\n  }\\n</script>
\\n
"}`);export{d as comp,r as data};