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

Basic usage

<ds-input placeholder="Name ..." />

Usage with label

<ds-input
  id="name"
  label="Your name"
  placeholder="Name ..." />

Disabled

<ds-input placeholder="Name ..." disabled />

Input types

You can use an input for different types of input.

<template>
  <div>
    <ds-input v-model="text"></ds-input>
    <ds-input v-model="text" type="password"></ds-input>
    <ds-input v-model="text" type="textarea" rows="2"></ds-input>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        text: 'Default text'
      }
    }
  }
</script>

Bind to a value

Use v-model to bind a value to the input.

<template>
  <div>
    <ds-input
      v-model="name"
      placeholder="Name ..."></ds-input>
    <ds-text>Your name: {{ name }}</ds-text>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        name: ''
      }
    }
  }
</script>

Validation

`,13),a("p",null,[e("We use "),a("a",{href:"https://github.com/yiminghe/async-validator",targe:"_blank"},"async-validator schemas"),e(" for validation.")],-1),n(`

If you need to validate more than one field it is better to use the form component.

<template>
  <div>
    <ds-input
      v-model="name"
      :schema="{type: 'string', min: 6, message: 'Name must be longer' }"
      placeholder="Name ..." />
  </div>
</template>
<script>
  export default {
    data() {
      return {
        name: ''
      }
    }
  }
</script>

Input sizes

<ds-input placeholder="Small ..." size="small"></ds-input>
<ds-input placeholder="Base ..."></ds-input>
<ds-input placeholder="Large ..." size="large"></ds-input>

Input icons

Add an icon to help the user identify the input type.

<ds-input placeholder="Search ..." icon="search"></ds-input>
<ds-input placeholder="Time ..." icon="clock"></ds-input>
<ds-input placeholder="Search ..." icon-right="search"></ds-input>
<ds-input placeholder="Search ..." icon="search" size="small"></ds-input>
<ds-input placeholder="Search ..." icon="search" size="large"></ds-input>
`,7)]))}const o=i(d,[["render",p],["__file","demo.html.vue"]]),h=JSON.parse('{"path":"/styleguide/src/system/components/data-input/Input/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Basic usage","slug":"basic-usage","link":"#basic-usage","children":[]},{"level":2,"title":"Usage with label","slug":"usage-with-label","link":"#usage-with-label","children":[]},{"level":2,"title":"Disabled","slug":"disabled","link":"#disabled","children":[]},{"level":2,"title":"Input types","slug":"input-types","link":"#input-types","children":[]},{"level":2,"title":"Bind to a value","slug":"bind-to-a-value","link":"#bind-to-a-value","children":[]},{"level":2,"title":"Validation","slug":"validation","link":"#validation","children":[]},{"level":2,"title":"Input sizes","slug":"input-sizes","link":"#input-sizes","children":[]},{"level":2,"title":"Input icons","slug":"input-icons","link":"#input-icons","children":[]}],"git":{"createdTime":1772365170000,"updatedTime":1772365170000,"contributors":[{"name":"Ulf Gebhardt","email":"ulf.gebhardt@webcraft-media.de","commits":1}]},"readingTime":{"minutes":0.92,"words":277},"filePathRelative":"styleguide/src/system/components/data-input/Input/demo.md","localizedDate":"March 1, 2026","excerpt":"

Basic usage

\\n
<ds-input placeholder=\\"Name ...\\" />
\\n
"}');export{o as comp,h as data};