Input

Text-like input

One line of text. Multi-line is Textarea; a number with step and format is InputNumber; a fixed pattern is InputMask; a secret is PasswordInput; a list of values is InputTags. A value people mostly read and only sometimes change — a title, a name — is Inplace: text until clicked, then this field, with no separate edit screen.

Basic

as shown on the credits

Enter a valid address

<script setup lang="ts">
import { ref } from "vue";
import { BlessInput } from "blessing-ui";
const name = ref("");
const mail = ref("bad@");
</script>

<template>
  <div class="row" style="align-items: flex-start">
    <div class="col">
      <BlessInput
        v-model="name"
        placeholder="加藤恵"
        aria-label="Name"
        description="as shown on the credits"
      />
    </div>
    <div class="col">
      <BlessInput
        v-model="mail"
        type="email"
        aria-label="Email"
        :error="mail.includes('@') && mail.split('@')[1] ? '' : 'Enter a valid address'"
      />
    </div>
  </div>
</template>

Sizes

¥

⌘K

<script setup lang="ts">
import { BlessInput } from "blessing-ui";
</script>

<template>
  <div class="row" style="align-items: flex-start">
    <div class="col">
      <BlessInput size="sm" placeholder="sm" aria-label="Small"
        ><template #prefix>¥</template></BlessInput
      >
    </div>
    <div class="col">
      <BlessInput placeholder="md" type="search" aria-label="Medium"
        ><template #suffix>⌘K</template></BlessInput
      >
    </div>
    <div class="col"><BlessInput size="lg" placeholder="lg" aria-label="Large" /></div>
  </div>
</template>

States

<script setup lang="ts">
import { BlessInput } from "blessing-ui";
</script>

<template>
  <div class="row" style="align-items: flex-start">
    <div class="col"><BlessInput model-value="disabled" disabled aria-label="Disabled" /></div>
    <div class="col"><BlessInput model-value="readonly" readonly aria-label="Read only" /></div>
    <div class="col"><BlessInput type="number" model-value="25" aria-label="Number" /></div>
  </div>
</template>

• In a form, wrap it in a Field: that gives the label, description and error, and wires them. Input's own description and error are for a label-less input — a search box, an inline edit with aria-label.
• #prefix / #suffix sit inside the plate (a unit, a shortcut hint). Things beside it — a button, https:// — are InputGroup.
• type passes through: email, url, search, tel get the right keyboard on phones. type="number" works, but InputNumber has the stepper and locale formatting.

Usage

import { BlessInput } from "blessing-ui";

API

Props

Name	Type	Default	Description
id	string	—
type	string	"text"
size	"md" | "sm" | "lg"	"md"
invalid	boolean	—
disabled	boolean	—
readonly	boolean	—
description	string	—	text under the field; also wired via aria-describedby
error	string	—	error text; sets aria-invalid
modelValue	string | number	""

Events

Name	Payload	Description
update:modelValue	[value: string | number]

Slots

Name	Scope	Description
prefix	—
suffix	—