@craydel-v3/craydel-text-field

CraydelTextField

Installation

Get the latest version by NPM:

$ npm i @craydel-v3/craydel-text-field

Component Import

Import the module chosen directly in your component

<script>
  import CraydelTextField from "@craydel-v3/craydel-text-field/src/CraydelTextField.vue";

  export default {
  components: {CraydelTextField}
}
</script>

Props

Name	Type	Default	Description
id	string	random ID	Sets the DOM id on the component.
placeholder	string	'Select'	Sets the component's placeholder text.
is-required	boolean	false	Puts component in a required state.
required-error	string	'Field is required'	Puts the component in an error state and passes through the custom required error message.
type	string	'text'	Sets input type. Options are: text, email, alpha, alphaNum, numeric, integer, decimal, url.
error-message	string	'Field is invalid'	Puts the input in an error state and passes through a custom error message.
max-length	number	100	The maximum number of characters allowed in the field.
max-length-error	string	'Value cannot be longer than max-length characters'	Puts the component in an error state and passes through a custom max length error message.
prefix	string	undefined	Displays prefix text.
suffix	string	undefined	Displays suffix text.
disabled	boolean	false	Disables the component.
loading	boolean | string	false	Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - primary, secondary, success, info, warning, error) or a Boolean which uses the primary color.

 

Events

Name	Description
blur	Emitted when the input is focused or blurred.
change	Emitted when the input is changed by user interaction.

 

Usage

An example showing a text field that allows decimals only.

<craydel-text-field
        type="decimal"
        suffix="%"
        placeholder="Enter percentage"
></craydel-text-field>