Input 入力欄

明確なラベルとエラーメッセージで、入力に迷わせません。

基本的な使い方

インタラクティブプレビュー

デバイス名デバイス一覧でこのデバイスを見分けるために使います。

デバイス ID

現在の名前：Augma

Vue のソースを表示

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="デバイス名"
      hint="デバイス一覧でこのデバイスを見分けるために使います。"
      placeholder="デバイス名を入力"
      :error="name.trim() ? undefined : 'デバイス名を入力してください'"
    />
    <AgmInput label="デバイス ID" model-value="AGM-001" disabled />
    <output>現在の名前：{{ name || '未入力' }}</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

プロパティ	型	デフォルト	説明
id	string	undefined	入力要素の ID（省略時は自動生成）
hint	string	undefined	補足説明。入力欄に関連付けられ、エラー時も表示されます
modelValue	string	''	v-model で更新
label	string	必須	表示ラベル
error	string	undefined	エラーメッセージ
disabled	boolean	false	入力を無効にする
type	string	'text'	ネイティブの入力種別

イベント

• update:modelValue(string)

キーボード操作と利用上の注意

ネイティブの入力欄と同じキーボード操作です。placeholder、name、autocomplete、required などの属性は input に渡されます。

インストール

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

編集可能なソースをコピー：

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