使用方法

InputGroup 将输入框与前缀、后缀、按钮等元素组合成一个整体，常用于需要添加说明标签、单位、操作按钮的场景。

基本用法通过 before 和 after 插槽添加前置或后置内容：

<script setup lang="ts">
import { InputGroup, InputGroupText } from '@astryx-vue/core/InputGroup'
import { TextInput } from '@astryx-vue/core/TextInput'
import { ref } from 'vue'

const domain = ref('')
</script>

<template>
  <InputGroup label="网站">
    <template #before>
      <InputGroupText>https://</InputGroupText>
    </template>
    <TextInput v-model="domain" label="网址" is-label-hidden placeholder="example" />
    <template #after>
      <InputGroupText>.com</InputGroupText>
    </template>
  </InputGroup>
</template>

写上标签之后，这一组就是一个字段：标签、说明、可选或必填、状态都由字段壳负责，不要在外面再包一层。组内输入框自己的标签继续说明这一格填什么，通常隐藏起来。前后缀里的固定文字用组内文本组件，它和前后缀共用同一套字号和颜色。没有标签时，组仍然只是一条连在一起的控件，方便嵌进已经有字段的表单。

解剖

部分	说明
标签	组上方的文字。
前缀	输入前面的内容，可以是文字、图标或按钮。
输入	主要输入元素，可以是 TextInput、NumberInput、TimeInput、DateInput、Typeahead、Selector 或 MultiSelector。
后缀	输入后面的内容，可以是文字、图标或按钮。
状态消息	组下面的错误、警告或成功提示。

最佳实践

指引	实践
推荐	用前置内容展示单位、协议前缀等固定文本。
推荐	用后置内容放置清除按钮、提交按钮等操作。
推荐	保持前后缀内容简洁，避免占用过多空间。
避免	同时使用过多前后缀元素，会让输入框显得拥挤。

示例

基本

Price

$

Amount

USD

金额输入两侧是固定的前缀和后缀，用来标明单位。

网站

Website

https://

URL

.com

协议和域名后缀固定在输入框两侧。

字段状态

Price ∙ Optional

Before tax

$

Amount

USD

Enter an amount

带上标签之后，说明、可选和错误都由这一组自己负责。