Input

The input element with a type attribute whose value is "text" represents a one-line plain text edit control for the input element’s value.

Examples

Input

Code

<script setup lang="ts">
import { ref } from 'vue'

const form = ref({
  name: ''
})
</script>

<template>
  <form @submit.prevent="">
    <base-input v-model="form.name" />
  </form>
</template>

Label

Code

<script setup lang="ts">
import { ref } from 'vue'

const form = ref({
  name1: '',
  name2: ''
})
</script>

<template>
  <form @submit.prevent="">
    <base-input
      v-model="form.name1"
      label="Label"
      layout="horizontal"
      description="Horizontal Layout"
    />
    <base-input
      v-model="form.name2"
      label="Label"
      layout="vertical"
      description="Vertical Layout"
    />
  </form>
</template>

Border

Code

<script setup lang="ts">
import { ref } from 'vue'

const form = ref({
  name1: '',
  name2: '',
  name3: ''
})
</script>

<template>
  <form @submit.prevent="">
    <base-input v-model="form.name1" label="Without Border" border="none" />
    <base-input v-model="form.name2" label="Simple Border" border="simple" />
    <base-input v-model="form.name3" label="Full Border" border="full" />
  </form>
</template>

Helper

Code

<script setup lang="ts">
import { ref } from 'vue'

const form = ref({
  name1: '',
  name2: '',
  name3: '',
  name4: '',
  name5: '',
  name6: 'Disabled'
})

const errors = ref(['Error Example'])
</script>

<template>
  <form @submit.prevent="">
    <base-input v-model="form.name1" label="Label" required />
    <base-input v-model="form.name2" label="Label" placeholder="Placeholder example" />
    <base-input v-model="form.name3" label="Label" description="Description example" />
    <base-input v-model="form.name4" label="Label" :helpers="['Helper example']" />
    <base-input v-model="form.name5" label="Label" v-model:errors="errors" />
    <base-input v-model="form.name6" label="Label" description="Disabled" disabled />
  </form>
</template>

Group

Code

<script setup lang="ts">
import { ref } from 'vue'

const form = ref({
  name: '',
  password: ''
})
</script>

<template>
  <Demo>
    <form @submit.prevent="">
      <base-input required v-model="form.name" label="Name" placeholder="Placeholder Name">
        <template #prefix>
          <base-icon icon="i-far-user mx-2" />
        </template>
      </base-input>
      <base-input required v-model="form.password" label="Password" type="password">
        <template #suffix>
          <base-button variant="text">
            <base-icon icon="i-far-eye mx-2" />
          </base-button>
        </template>
      </base-input>
    </form>
  </Demo>
</template>

Input API

Types

export type BaseInputBorderType = 'none' | 'simple' | 'full'
export type BaseFormLayoutType = `horizontal` `vertical`

Props

Name	Type	Default	Description
v-model	string		v-model is required.
v-model:errors	string[]		Input error message.
label	string		Form label.
description	string		Input description.
required	boolean	false	Input required.
border	BaseInputBorderType	simple	Input border.
layout	BaseFormLayoutType	vertical	Input layout.
helpers	string[]		Input helper message.
data-testid	string		Testing ID.

Slot

#prefix slot for rendering input prefix like icon

#suffix slot for rendering input suffix like icon

Automated Test Guide

If you pass a data-testid to the <base-input> component, it will automatically generate unique data-testid attributes for testing.

Gherkin Scenario

When I type "John Doe" into "name"

Step Definition

When('I type {string} into {string}', (value: string, selector: string) => {
  cy.get(`[data-testid="${selector}"]`).type(value)
})

Code Implementation

<script setup>
import { ref } from 'vue'

const name = ref()
</script>

<template>
  <base-input v-model="name" data-testid="name" />
</template>