Text Element

Renders a text input.

Examples
Options
Properties

#Examples

Basic Usage

Renders a text input.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        text: {
          type: 'text'
        }
      }
    })
  }
</script>

Masked

Using a US phone number mask.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        text: {
          type: 'text',
          mask: ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
        }
      }
    })
  }
</script>

With Addons

Addons before and after the input.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        text: {
          type: 'text',
          addon: {
            before: '€',
            after: '%'
          }
        }
      }
    })
  }
</script>

Debouncing

Email is only getting validated after 300 ms.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        text: {
          type: 'text',
          debounce: 300,
          rules: 'email'
        }
      }
    })
  }
</script>

Form `data`:

Translatable

Translate the contents of input using 't-text' as type.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      multilingual: true,
      languages: {
        en: {
          label: 'English'
        },
        fr: {
          label: 'French'
        },
      },
      schema: {
        text: {
          type: 't-text'
        }
      }
    })
  }
</script>

#Options

Name	Type	Description
inputType	`string`	The 'type' attribute of the field.
default	`string`	Value of element when the form is initially loaded or reseted.
placeholder	`string`	The placeholder of the element.
floating	`string`	The floating label of the element.
disabled	`boolean`	Whether the field is disabled.
readonly	`boolean`	Whether the field is readonly.
autocomplete	`boolean`	Whether the 'autocomplete' attribute of the field should be on / off.
mask	`array`	Mask to be applied for the field using text-mask.
guide	`boolean`	Whether the mask is in in guide or no guide mode.
placeholderChar	`string`	Placeholder character represents the fillable spot in the mask.
keepCharPositions	`boolean`	If `true`, adding or deleting characters will not affect the positions of existing characters. If `false`, adding characters causes existing characters to advance and deleting characters causes existing characters to move back.
pipe	`function`	A function that will give you the opportunity to modify the conformed value before it is displayed on the screen when masked.
showMask	`boolean`	Whether to display the mask as a placeholder in place of the regular placeholder when the input element value is empty.
addon	`object`	An object containing `before` and `after` properties, representing the contents of the input's before and after addons.
debounce	`number`	If provided each validators execution will be delayed by this amount of `milliseconds`.

#Properties

Name	Type	Default	Description
addon	`object`	`{}`	An object containing `before` and `after` properties, representing the contents of the input's before and after addons.
type	`string`	`'text'`	The HTML type of input field (like type="text").
defaultValue	`string`	`null`	Value of element when the form is initially loaded or reseted.
placeholder	`string`	`null`	The placeholder of the element.
floating	`string`	`null`	The floating label of the element.
disabled	`boolean`	`false`	Whether the field is disabled.
readonly	`boolean`	`false`	Whether the field is readonly.
autocomplete	`boolean`	`true`	Whether the input field should have HTML autocomplete.
debounce	`number`	`null`	If provided each validators execution will be delayed by this amount of `milliseconds`. If `null` no debounce will occur.
mask	`array\|false`	`false`	Mask to be applied for the field using text-mask. If `false` no mask is used.
guide	`mixed`	`true`	Whether the mask is in in guide or no guide mode.
placeholderChar	`string`	`'_'`	Placeholder character represents the fillable spot in the mask.
keepCharPositions	`boolean`	`false`	If `true`, adding or deleting characters will not affect the positions of existing characters. If `false`, adding characters causes existing characters to advance and deleting characters causes existing characters to move back.
pipe	`function`	`null`	A function that will give you the opportunity to modify the conformed value before it is displayed on the screen when masked.
showMask	`boolean`	`true`	Whether to display the mask as a placeholder in place of the regular placeholder when the input element value is empty.
masked	`boolean`	-	Determines if the element is masked.