ChuFix UI v0.11.0
开发预览 更新于 2026-05-10

InputGroup 输入组合

把多个 Input / Button / Select / 静态标签拼到一起，共用一组外圆角和边框。

基础用法

InputGroup 是一个纯样式包裹层。把表单控件按顺序放入，相邻的内圆角会被自动去掉，第一个 / 最后一个元素继承外圆角。静态标签用 <span class="cf-input-group__addon"> 渲染。

背景 视口
@
src/App.vue 
<script setup lang="ts">
import { ref } from 'vue';
import { CfInputGroup, CfInput } from '@chufix-design/vue';

const search = ref('');
</script>
<template>
  <CfInputGroup>
    <span class="cf-input-group__addon">@</span>
    <CfInput v-model="search" placeholder="username" />
  </CfInputGroup>
</template>
<script setup>
import { ref } from 'vue';
import { CfInputGroup, CfInput } from '@chufix-design/vue';

const search = ref('');
</script>
<template>
  <CfInputGroup>
    <span class="cf-input-group__addon">@</span>
    <CfInput v-model="search" placeholder="username" />
  </CfInputGroup>
</template>
import { useState } from 'react';
import { CfInput, CfInputGroup } from '@chufix-design/react';

export default function Demo() {
  const [search, setSearch] = useState('');
  return (
    <>
      <CfInputGroup>
          <span className="cf-input-group__addon">@</span>
          <CfInput value={search} onChange={setSearch} placeholder="username" />
        </CfInputGroup>
    </>
  );
}
import { useState } from 'react';
import { CfInput, CfInputGroup } from '@chufix-design/react';

export default function Demo() {
  const [search, setSearch] = useState('');
  return (
    <>
      <CfInputGroup>
          <span className="cf-input-group__addon">@</span>
          <CfInput value={search} onChange={setSearch} placeholder="username" />
        </CfInputGroup>
    </>
  );
}

与 Select / Button 组合

最常见的「URL 输入框 + 协议选择 + 提交按钮」组合 — 三段拼到一起共享一组边框。

背景 视口
src/App.vue 
<script setup lang="ts">
import { ref } from 'vue';
import { CfInputGroup, CfInput, CfButton, CfSelect } from '@chufix-design/vue';

const protocol = ref('https');
const host = ref('chufix.com');
const protocols = [
  { label: 'https://', value: 'https' },
  { label: 'http://', value: 'http' },
];
</script>
<template>
  <CfInputGroup>
    <CfSelect v-model="protocol" :options="protocols" />
    <CfInput v-model="host" placeholder="example.com" />
    <CfButton>访问</CfButton>
  </CfInputGroup>
</template>
<script setup>
import { ref } from 'vue';
import { CfInputGroup, CfInput, CfButton, CfSelect } from '@chufix-design/vue';

const protocol = ref('https');
const host = ref('chufix.com');
const protocols = [
  { label: 'https://', value: 'https' },
  { label: 'http://', value: 'http' },
];
</script>
<template>
  <CfInputGroup>
    <CfSelect v-model="protocol" :options="protocols" />
    <CfInput v-model="host" placeholder="example.com" />
    <CfButton>访问</CfButton>
  </CfInputGroup>
</template>
import { useState } from 'react';
import { CfButton, CfInput, CfInputGroup, CfSelect } from '@chufix-design/react';

export default function Demo() {
  const [protocol, setProtocol] = useState('https');
  const [host, setHost] = useState('chufix.com');
  const protocols = [
    { label: 'https://', value: 'https' },
    { label: 'http://', value: 'http' },
  ];
  return (
    <>
      <CfInputGroup>
          <CfSelect value={protocol} onChange={setProtocol} options={protocols} />
          <CfInput value={host} onChange={setHost} placeholder="example.com" />
          <CfButton>访问</CfButton>
        </CfInputGroup>
    </>
  );
}
import { useState } from 'react';
import { CfButton, CfInput, CfInputGroup, CfSelect } from '@chufix-design/react';

export default function Demo() {
  const [protocol, setProtocol] = useState('https');
  const [host, setHost] = useState('chufix.com');
  const protocols = [
    { label: 'https://', value: 'https' },
    { label: 'http://', value: 'http' },
  ];
  return (
    <>
      <CfInputGroup>
          <CfSelect value={protocol} onChange={setProtocol} options={protocols} />
          <CfInput value={host} onChange={setHost} placeholder="example.com" />
          <CfButton>访问</CfButton>
        </CfInputGroup>
    </>
  );
}

前后静态标签

<span class="cf-input-group__addon"> 可以放在输入框两侧，常见于货币 / URL 路径前缀后缀。

背景 视口
¥RMB
https:///path
src/App.vue 
<script setup lang="ts">
import { ref } from 'vue';
import { CfInputGroup, CfInput } from '@chufix-design/vue';

const price = ref('');
const url = ref('');
</script>
<template>
  <div class="demo-stack">
    <CfInputGroup>
      <span class="cf-input-group__addon">¥</span>
      <CfInput v-model="price" placeholder="价格" />
      <span class="cf-input-group__addon">RMB</span>
    </CfInputGroup>
    <CfInputGroup>
      <span class="cf-input-group__addon">https://</span>
      <CfInput v-model="url" placeholder="example.com" />
      <span class="cf-input-group__addon">/path</span>
    </CfInputGroup>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { CfInputGroup, CfInput } from '@chufix-design/vue';

const price = ref('');
const url = ref('');
</script>
<template>
  <div class="demo-stack">
    <CfInputGroup>
      <span class="cf-input-group__addon">¥</span>
      <CfInput v-model="price" placeholder="价格" />
      <span class="cf-input-group__addon">RMB</span>
    </CfInputGroup>
    <CfInputGroup>
      <span class="cf-input-group__addon">https://</span>
      <CfInput v-model="url" placeholder="example.com" />
      <span class="cf-input-group__addon">/path</span>
    </CfInputGroup>
  </div>
</template>
import { useState } from 'react';
import { CfInput, CfInputGroup } from '@chufix-design/react';

export default function Demo() {
  const [price, setPrice] = useState('');
  const [url, setUrl] = useState('');
  return (
    <>
      <div className="demo-stack">
          <CfInputGroup>
            <span className="cf-input-group__addon">¥</span>
            <CfInput value={price} onChange={setPrice} placeholder="价格" />
            <span className="cf-input-group__addon">RMB</span>
          </CfInputGroup>
          <CfInputGroup>
            <span className="cf-input-group__addon">https://</span>
            <CfInput value={url} onChange={setUrl} placeholder="example.com" />
            <span className="cf-input-group__addon">/path</span>
          </CfInputGroup>
        </div>
    </>
  );
}
import { useState } from 'react';
import { CfInput, CfInputGroup } from '@chufix-design/react';

export default function Demo() {
  const [price, setPrice] = useState('');
  const [url, setUrl] = useState('');
  return (
    <>
      <div className="demo-stack">
          <CfInputGroup>
            <span className="cf-input-group__addon">¥</span>
            <CfInput value={price} onChange={setPrice} placeholder="价格" />
            <span className="cf-input-group__addon">RMB</span>
          </CfInputGroup>
          <CfInputGroup>
            <span className="cf-input-group__addon">https://</span>
            <CfInput value={url} onChange={setUrl} placeholder="example.com" />
            <span className="cf-input-group__addon">/path</span>
          </CfInputGroup>
        </div>
    </>
  );
}

等宽撑满

stretch 让子元素等宽撑满父容器 — 适合占满表单整行的搜索框 + 提交按钮组合。

背景 视口
src/App.vue 
<script setup lang="ts">
import { ref } from 'vue';
import { CfInputGroup, CfInput, CfButton } from '@chufix-design/vue';

const q = ref('');
</script>
<template>
  <div style="max-width: 24rem;">
    <CfInputGroup stretch>
      <CfInput v-model="q" placeholder="搜索…" />
      <CfButton variant="primary">搜索</CfButton>
    </CfInputGroup>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { CfInputGroup, CfInput, CfButton } from '@chufix-design/vue';

const q = ref('');
</script>
<template>
  <div style="max-width: 24rem;">
    <CfInputGroup stretch>
      <CfInput v-model="q" placeholder="搜索…" />
      <CfButton variant="primary">搜索</CfButton>
    </CfInputGroup>
  </div>
</template>
import { useState } from 'react';
import { CfButton, CfInput, CfInputGroup } from '@chufix-design/react';

export default function Demo() {
  const [q, setQ] = useState('');
  return (
    <>
      <div style={{ maxWidth: "24rem" }}>
          <CfInputGroup stretch>
            <CfInput value={q} onChange={setQ} placeholder="搜索…" />
            <CfButton variant="primary">搜索</CfButton>
          </CfInputGroup>
        </div>
    </>
  );
}
import { useState } from 'react';
import { CfButton, CfInput, CfInputGroup } from '@chufix-design/react';

export default function Demo() {
  const [q, setQ] = useState('');
  return (
    <>
      <div style={{ maxWidth: "24rem" }}>
          <CfInputGroup stretch>
            <CfInput value={q} onChange={setQ} placeholder="搜索…" />
            <CfButton variant="primary">搜索</CfButton>
          </CfInputGroup>
        </div>
    </>
  );
}

API · Props

属性类型默认值说明
orientation'horizontal' | 'vertical''horizontal'排列方向
size'sm' | 'md' | 'lg''md'静态标签的尺寸（控件本身用各自的 size 即可）
stretchbooleanfalse子项等宽撑满父容器

反馈与讨论

InputGroup 输入组合 的讨论

0
0 / 600
正在加载评论...