InputField

Component

Props

Usage

id

Sets the id of the field.

 <template>
    <InputField id="field-id" />
</template>
 

• Type: string
• Required: true

label

Sets the label of the field.

 <template>
    <InputField label="Label text" />
</template>
 

• Type: string

type

Sets the type of the input field. It uses the AllowedInputType type.

For the rest of native HTML input types, please use the specific components provided by AirUI.

 <template>
    <InputField type="text" />
</template>
 

• Type: AllowedInputType

   export type AllowedInputType =
      | 'color'
      | 'email'
      | 'number'
      | 'password'
      | 'tel'
      | 'text'
      | 'url'
      | 'date'
      | 'datetime-local'
      | 'time'
      | 'month'
      | 'week'
   

• Default: 'text'

placeholder

Sets the placeholder text of the input field.

 <template>
    <InputField placeholder="Placeholder" />
</template>
 

• Type: string
• Default: 'Placeholder'

helpText

Sets the help text displayed below the input field.

 <template>
    <InputField helpText="Help text example" />
</template>
 

• Type: string

helpTextPosition

Sets the position of the help text relative to the input field. It uses the Position enum.

 <template>
    <InputField helpTextPosition="top" helpText="Appears above the field" />
</template>
 

• Type: Position
• Default: Position.BOTTOM

Options

icon

Sets the icon of the input field.

 <template>
    <InputField icon="mdi:account" />
</template>
 

• Type: string

suffixIcon

Sets the suffix icon of the input field.

 <template>
    <InputField suffixIcon="mdi:eye" />
</template>
 

• Type: string

linkText

Sets the link text of the input field when the type is password.

 <template>
    <InputField linkText="Forgot password?" />
</template>
 

• Type: string

linkUrl

Sets the link URL of the input field when the type is password.

 <template>
    <InputField linkUrl="/reset-password" />
</template>
 

• Type: string

size

Sets the size of the input field. It uses the InputSize enum.

 <template>
    <InputField :size="InputSize.MD" />
</template>
 

• Type: InputSize
• Default: InputSize.MD

Options

modelValue

Sets the value of the input field.

 <template>
    <InputField v-model="inputValue" />
</template>
<script setup lang="ts">
const inputValue = ref<string | number | null>('')
</script>
 

• Type: string | number | null
• Default: ''

validator

Sets the validator function for the field, which controls its internal validation state.

It uses the validateField utility to perform required field validation.

 <template>
    <InputField :validator="validateField" />
</template>
 

• Type: function
• Default: null

error (v-model:error)

Sets the error message of the field. This prop is bindable via v-model:error, allowing two-way syncing of the validation state.

 <template>
    <InputField v-model:error="errorMessage" />
</template>
 

• Type: string
• Default: ''

maxLength

Sets the maximum length of the input field.

 <template>
    <InputField :maxLength="10" />
</template>
 

• Type: number

filterAlphabetic

Sets whether to filter alphabetic characters in the input field.

 <template>
    <InputField filterAlphabetic />
</template>
 

• Type: boolean
• Default: false

permitNegativeNumber

Sets whether to permit negative numbers in the input field (only for type number).

 <template>
    <InputField permitNegativeNumber />
</template>
 

• Type: boolean
• Default: false

hasShowPasswordButton

Sets whether to show the "show password" button (only for type password).

 <template>
    <InputField hasShowPasswordButton />
</template>
 

• Type: boolean
• Default: true

min

Sets the minimum value of the input field (only for type number).

 <template>
    <InputField :min="0" />
</template>
 

• Type: string

max

Sets the maximum value of the input field (only for type number).

 <template>
    <InputField :max="100" />
</template>
 

• Type: string

step

Sets the step value of the input field (only for type number).

 <template>
    <InputField :step="1" />
</template>
 

• Type: string

pattern

Sets the pattern attribute of the input field.

 <template>
    <InputField pattern="[A-Za-z]{3}" />
</template>
 

• Type: string

readonly

Sets the readonly state of the field.

 <template>
    <InputField readonly />
</template>
 

• Type: boolean
• Default: false

autocomplete

Sets the autocomplete attribute of the input field.

 <template>
    <InputField autocomplete="on" />
</template>
 

• Type: string
• Default: 'off'

autofocus

Sets the autofocus state of the field.

 <template>
    <InputField autofocus />
</template>
 

• Type: boolean
• Default: false

disabled

Sets the disabled state of the field.

 <template>
    <InputField disabled />
</template>
 

• Type: boolean
• Default: false

required

Sets the required state of the field.

 <template>
    <InputField required />
</template>
 

• Type: boolean
• Default: false

showOptionalLabel

When the field is not required, shows an "(optional)" hint next to the label. Set to false to hide it.

 <template>
    <InputField label="Middle name" :showOptionalLabel="false" />
</template>
 

The hint text defaults to a global setting that can be overridden project-wide, and can also be overridden per field with the optionalLabel prop.

• Type: boolean
• Default: true

optionalLabel

Overrides the "(optional)" hint text for this specific field, taking priority over the global default.

 <template>
    <InputField label="Middle name" optionalLabel="(not required)" />
</template>
 

• Type: string

transparent

When true, removes the default bg-background-container-surface background from the input container, making it transparent.

 <template>
    <InputField transparent />
</template>
 

• Type: boolean
• Default: false

inputClass

Applies additional CSS classes directly to the <input> element, appended last so they can override other classes.

 <template>
    <InputField inputClass="text-right font-mono" />
</template>
 

• Type: string