# Input

# Text input

# Introduction

The CpInput component is a basic input component. It directly maps to an input element.

<cp-input name="text-input" type="text" placeholder="Your text input..." v-model="yourVariable" />

# Size

You can set the size of the CpInput using font-size directly on the component.

<cp-input label="12px font-sized input" name="text-input" type="text" placeholder="Your text input..." style="font-size: 12px" v-model="yourVariable"/>
<cp-input label="14px font-sized input" name="text-input" type="text" placeholder="Your text input..." style="font-size: 14px" v-model="yourVariable"/>
<cp-input label="16px font-sized input (default)" name="text-input" type="text" placeholder="Your text input..." />
<cp-input label="18px font-sized input" name="text-input" type="text" placeholder="Your text input..." style="font-size: 18px" v-model="yourVariable"/>

# Large variation

You can have a specific large variation for the CpInput using is-large property.

`
<cp-input label="Large input" is-large type="text" placeholder="Large input" />`

# Disabled`

`
<cp-input label="Disabled input" type="text" placeholder="Disabled input" disabled />

# Invalid

<cp-input label="Invalid input" type="text" placeholder="Invalid input" is-invalid />

# Label

You can add the label property to display it ontop of the CpInput.

<cp-input
  name="text-input"
  type="text"
  placeholder="Your text input..."
  label="My wonderful input"
  v-model="yourVariable"
/>

# Icon

It's possible to add an icon through the input-icon and input-icon-after slots.

The slot accepts icons that can be one found in Vue feather icon's various icons, or any custom svg.

TIP

It's also possible to hide validity icons using the hide-validity-icon property.

cm
<template>
  <div style="display: flex; flex-wrap: wrap; margin: 0 -8px">
    <cp-input
      v-model="inputValue"
      label="Input with custom icon"
      name="email"
      type="email"
      placeholder="user@example.com"
      style="padding: 0 8px"
    >
      <mail-icon slot="input-icon" />
    </cp-input>
    <cp-input
      v-model="inputValue"
      label="Input with unit"
      name="width"
      type="text"
      placeholder="100"
      style="padding: 0 8px"
    >
      <template slot="input-icon-after">
        cm
      </template>
    </cp-input>
  </div>
</template>

<script>
import { MailIcon } from 'vue-feather-icons'

export default {
  components: {
    MailIcon,
  },
  data() {
    return {
      inputValue: '',
    }
  },
}
</script>

# No border

You can use the :remove-border property to remove the border for specific usage, like colored background.

# Validation

You can dynamically set input validity with following props:

  • :is-invalid: display error visual styling
  • :error-message: display the error message

Note that native CSS errors are also handled.

  <cp-input
    name="text-input"
    type="text"
    placeholder="Your text input..."
    v-model='yourVariable'
    is-invalid
    error-message="Input error message"
  />

# Advanced masking

You can add a mask to filter what can be typed in your CpInput with following props:

  • :mask
  • :masked
  • :token

WARNING

You should not use the type property in combination with a mask; it generates a console error. Make sure you either use a mask with type="text", either a specific type on your input.


  <cp-input
    name="text-input"
    type="text"
    placeholder="00/00/0000"
    v-model='yourVariable'
    mask="##/##/####"
  />

# Masks

Can be a String or an Array, will force the input to match the mask pattern.

Examples:

  • '##/##/####'
  • "['###.###.###-##', '##.###.###/####-##']"
  • "['###-#', '####-#', '#####-#', '######-#']"
  • "['(##) ####-####', '(##) #####-####']"

# Masked

Is a Boolean. Model will match the string as it appears within the masked input.

# Tokens

const tokens = {
  '#': { pattern: /\d/ },
  X: { pattern: /[0-9a-zA-Z]/ },
  S: { pattern: /[a-zA-Z]/ },
  A: { pattern: /[a-zA-Z]/, transform: v => v.toLocaleUpperCase() },
  a: { pattern: /[a-zA-Z]/, transform: v => v.toLocaleLowerCase() },
  '!': { escape: true },
}

# CpInput Props

# :value string | number | bool]

The input value. Returns a Number if type props is set to number

# :label string

The label used above the input element.

# :placeholder string

The placeholder text when there is no value present. This props is required.

# :required bool = false

Makes the input element required.

# :input-id string = randomString

The id used to bind the label with the textarea. It's set by default to an automatically generated random string.

# :type string = 'text'

The input type directly mapped to native type input attribute. This props is required.

Valid values are: 'text', 'date', 'datetime-local', 'email', 'month', 'number', 'password', 'search', 'tel', 'time', 'url', 'week'

# :name string

Native name mapped attribute for form purposes.

# :readonly bool = false

Makes the input element readonly.

# :disabled bool = false

Makes the input element disabled.

# :is-invalid bool = false

Sets visual styling of an invalid input. Note that this does not affect any error-message.

# :error-message string

Sets input custom error message. Shown only when is-invalid = true.

# :mask [string, array]

Forces the input to match custom mask pattern.

# :masked bool = false

Makes the input element work with masks.

# :tokens object

Custom tokens for mask.

# :remove-border bool = true

Removes input border and error box visual styling.

# :hide-validity-icon bool = false

When set to true, remove valid/invalid icons.

# :is-large bool = false

Make the input bigger with specific style properties.

# @input func = () => {}

The input native @input event, handling input value changes. It generally takes a function which update the input value. It can also be used with v-model

# Textarea

# Introduction

It directly maps to a textarea element. It combines a label, textarea and validation message in one & is used for traditional forms.

<cp-textarea placeholder="Textarea placeholder..." />

# Textarea with a label

Just add the :label props

<cp-textarea placeholder="Textarea placeholder..." label="Label" />

# Textarea with an error and error message

You can display the error style using the is-invalid props and customize the error message via the error-message one.

<cp-textarea placeholder="Textarea placeholder..." label="Label" is-invalid error-message="error message" />

# CpTextarea Props

# :value string

The textarea value.

# :label string

The label used above the input element.

# :placeholder string

The placeholder text when there is no value present. This props is required.

# :required bool = false

Makes the input element required.

# :input-id string = randomString

The id used to bind the label with the textarea. It's set by default to an automatically generated random string.

# :disabled bool = false

Makes the textarea element disabled.

# :is-invalid bool = false

Sets visual styling of an invalid textarea. Note that this does not effect any error-message.

# :error-message bool = false

Sets input custom error message. Shown only when is-invalid = true.

# :height number = 200

The min-height of the textarea. It is set to 200px by default.