AisInput

AisInput produces a branded html <input> element. It is built on top of BaseInput and intended to be used alongside other AIS form elements.

Props

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.

Good morning

<script setup>
  import {ref} from "vue";
  import { AisInput } from '@ais-public/ais-components'
  import { AisField } from '@ais-public/ais-components'

  const props = defineProps({
    label: { type: String, required: true },
  })

  const inputValue = ref('Good morning')
</script>

<template>
  <div class="grid gap-2">
    <AisField :label="props.label" label-mode="sr-only">
      <AisInput v-model="inputValue" />
    </AisField>

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

type

Set the input's type. AisInput is targeted at types rendered as text fields, and the expected type list is not comprehensive. Specializing the input type can be helpful to mobile users as different types will use different keyboards.

Using a native browser control is not guaranteed to provide a seamless brand experience. If one exists, you should prefer a purpose-built AIS component. For example, use AisDatepicker instead of type date.

textdatedatetime-localemailmonthnumberpasswordsearchteltimeurlweek

<template>
  <div class="grid gap-8">
    <AisSelect
      :options="inputTypes"
      v-model="selectedType"
    />

    <AisInput
      :type="selectedType"
      v-model="inputValue"
    />
  </div>
</template>

<script setup>
  import {ref} from "vue";
  import { AisInput } from '@ais-public/ais-components'
  import { AisSelect } from '@ais-public/ais-components'
  import {inputTypes} from "@/components/input/input-props";


  const selectedType = ref('text')
  const inputValue = ref('')
</script>

name

name is required when the field will be submitted with a form.

placeholder

placeholder sets the text that appears when no value is set.

<script setup>
  import {ref} from "vue";
  import { AisInput } from '@ais-public/ais-components'

  const inputValue = ref('')
</script>

<template>
  <div class="grid gap-8">
    <AisInput
      placeholder="User prompt..."
      v-model="inputValue"
    />
  </div>
</template>

size

The size prop takes the standard sm, md, and lg values and adjusts the size of the input accordingly.

smmdlgxl

<template>
  <div class="grid gap-8">
    <AisSelect
      :options="['sm', 'md', 'lg', 'xl']"
      v-model="selectedSize"
    />

    <AisInput
      :size="selectedSize"
      :modelValue="label"
    />
  </div>
</template>

<script setup>
  import {ref, computed} from "vue";
  import { AisInput } from '@ais-public/ais-components'
  import { AisSelect } from '@ais-public/ais-components'

  const selectedSize = ref('md')
  const label = computed(() => 'Size: ' + selectedSize.value )
</script>

icon

AisInput accepts an icon prop to display an icon in the input. icon will accept either a FontAwesome icon definition or a string for one of our standard icons.

<template>
  <div class="grid gap-8">
    <AisInput icon="user" v-model="value"/>
  </div>
</template>

<script setup>
  import {ref} from "vue";
  import { AisInput } from '@ais-public/ais-components'
  const value = ref('bruton-gaster')
</script>

status

AisInput accepts a status prop to place the input in a logical state. status will accept the values: busy, success, error, and required. The current state will be expressed through an icon on the right side of the input.

Developers are responsible for maintaining a field's status as a user works through a particular process flow.

busysuccesserrorrequired

<template>
  <div class="grid gap-8">
    <AisSelect
      :options="controlStates"
      v-model="selectedStatus"
    />
    <AisInput
      :status="selectedStatus"
      v-model="value"
    />
  </div>
</template>

<script setup>
  import {ref} from "vue";
  import {controlStates} from "@/util/controls";
  import { AisInput } from '@ais-public/ais-components'
  import { AisSelect } from '@ais-public/ais-components'

  const selectedStatus = ref('busy')
  const value = ref('Show a status')
</script>

disabled

Use the boolean disabled prop to disable an AisInput. You can use disabled by itself or :disabled="true". If the input is used inside an AisField component, you should use the disabled prop on AisField as it will disable the input and the related content.

<template>
  <div class="grid gap-8">
    <AisInput disabled v-model="value"/>
  </div>
</template>

<script setup>
import {ref} from "vue";
import { AisInput } from '@ais-public/ais-components'
const value = ref('Input is disabled')
</script>

invalid

Use the boolean invalid prop to mark an AisInput as invalid. You can use invalid by itself or :invalid="true".

<template>
  <div class="grid gap-8">
    <AisInput invalid v-model="value"/>
  </div>
</template>

<script setup>
import {ref} from "vue";
import { AisInput } from '@ais-public/ais-components'
const value = ref('Input is invalid')
</script>

autocomplete

autocomplete controls the HTML autocomplete attribute. Review docs for details.

Events

@update:modelValue

AisInput 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.

Methods

focus()

AisInput exposes a focus() method to programmatically focus the input element. The method can be invoked through a template ref specified on an AisInput component.

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

const searchValue = ref('')
const search = ref(null)
const handleFocus = () => search.value.focus()
</script>

<template>
  <div class="flex gap-4">
    <AisInput
        ref="search"
        v-model="searchValue"
        placeholder="Enter search value..."
        class="grow"
    />

    <AisButton
        @click="search.focus()"
        hover press
    >
      Focus 1
    </AisButton>
    <AisButton
        @click="handleFocus"
        variant="secondary"
        hover press
    >
      Focus 2
    </AisButton>
  </div>
</template>