InputGroup

Shared surface: addons + any control

One control plus fixed pieces that share its plate: https:// before a domain, ¥ before a price, a unit select, a Go button. They read as one field, focus as one field, and disabled covers the lot.

Basic

https://

.com

¥

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

<template>
  <div class="col">
    <BlessInputGroup>
      <template #prefix>https://</template>
      <BlessInput placeholder="saenai.tv" aria-label="Domain" />
      <template #suffix>.com</template>
    </BlessInputGroup>
    <BlessInputGroup>
      <BlessInput placeholder="search episodes" aria-label="Search episodes" />
      <template #suffix><BlessButton size="sm">Go</BlessButton></template>
    </BlessInputGroup>
    <BlessInputGroup size="sm" disabled>
      <template #prefix>¥</template>
      <BlessInput size="sm" model-value="1980" aria-label="Price" />
    </BlessInputGroup>
  </div>
</template>

• Things that belong inside the field — a search icon, a ⌘K hint — are Input's own #prefix / #suffix. A button that isn't attached to the field is just a Button beside it.
• size sets the group's height; give the control inside the same size so its text matches.
• The group renders a <fieldset>, so disabled really disables every control inside it, not just the look.

Usage

import { BlessInputGroup } from "blessing-ui";

API

Props

Name	Type	Default	Description
size	"md" | "sm" | "lg"	"md"
disabled	boolean	—

Slots

Name	Scope	Description
prefix	—
default	—
suffix	—