Base Input

The BaseInput component produces an unbranded <input> element. It provides the foundation for AisInput and can be used to build other custom controls. Its primary advantage over using a raw <input> is prop autocomplete.

Props

BaseInput supports the same attributes as described by AisInput. Any attribute on BaseInput will be included on the <input> element.

v-model

Use the v-model directive to bind to an input's value. v-model uses the modelValue prop under the covers. See Vue's documentation for details.

Disabled

Scrooge Jones

<template>
  <div class="grid gap-4">
    <BaseInput
        v-model="nickname"
        :id="fieldId"
        :disabled="disabled"
        class="px-3 py-2 border rounded"
        @update:modelValue="handleUpdate"
    />

    <div class="flex gap-8">
      <label>
        <BaseCheckbox v-model="disabled" /> Disabled
      </label>
    </div>


    <div class="border p-4 bg-ui-gray-50 rounded">
      {{nickname}}
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import { BaseInput } from '@ais-public/ais-components'
  import { BaseCheckbox } from '@ais-public/ais-components'


  const fieldId = 'exampleField'
  let nickname = ref('Scrooge Jones')
  const disabled = ref(false)

  const handleUpdate = (blob) => {
    console.log('Example handleUpdate', blob)
  }
</script>

Events

@update:modelValue

BaseInput uses Vue's standard v-model configuration. As a result, it will fire the @update:modelValue event whenever the input's value changes. Typically, v-model should be preferred, but binding the event directly may be useful in special circumstances. See Vue's documentation for details.