Input

Clear labels and error messages keep every entry on track.

Basic usage

Live preview

Device nameIdentifies this device in the device list.

Device ID

Current name: Augma

View Vue source

Vue · TypeScript

<script setup lang="ts">
import { AgmInput } from 'augma'
import { shallowRef } from 'vue'

const name = shallowRef('Augma')
</script>

<template>
  <div class="example-stack">
    <AgmInput
      v-model="name"
      label="Device name"
      hint="Identifies this device in the device list."
      placeholder="Enter a device name"
      :error="name.trim() ? undefined : 'A device name is required'"
    />
    <AgmInput label="Device ID" model-value="AGM-001" disabled />
    <output>Current name: {{ name || 'Not set' }}</output>
  </div>
</template>

<style scoped>
.example-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.example-stack {
  display: grid;
  gap: 24px;
  width: 100%;
  max-width: 360px;
}
</style>

API

Prop	Type	Default	Description
id	string	undefined	Optional ID for the input element; generated by default
hint	string	undefined	Helper text linked to the input and kept while an error shows
modelValue	string	''	Updated through v-model
label	string	Required	Visible label
error	string	undefined	Error message
disabled	boolean	false	Blocks input
type	string	'text'	Native input type

Events

• update:modelValue(string)

Keyboard and usage notes

Uses native input keyboard behavior. Attributes such as placeholder, name, autocomplete and required are passed to the input.

Installation

import { AgmInput } from 'augma'
import 'augma/style.css'

Copy the editable source:

pnpm dlx [email protected] add https://augma.yyj.moe/r/input.json