Preview Updated 2026-05-10

InputGroup

Compose multiple Input / Button / Select / static labels into one unit with shared outer radius and border.

Basic usage

InputGroup is a pure styling wrapper. Put form controls inside in order; adjacent inner radii are removed automatically and the first / last element inherits the outer radius. Static labels are rendered with <span class="cf-input-group__addon">.

背景

<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>

<CfInputGroup>
<span className="cf-input-group__addon">@</span>
<CfInput value={search} onChange={(e) => setSearch(e.target.value)} placeholder="username" />
</CfInputGroup>

<CfInputGroup>
<span className="cf-input-group__addon">@</span>
<CfInput value={search} onChange={(e) => setSearch(e.target.value)} placeholder="username" />
</CfInputGroup>

With Select / Button

The most common combination — “URL input + protocol select + submit button” — three segments share a single border.

背景

<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>

<CfInputGroup>
<CfSelect value={protocol} onChange={setProtocol} options={protocols} />
<CfInput value={host} onChange={(e) => setHost(e.target.value)} placeholder="example.com" />
<CfButton>Visit</CfButton>
</CfInputGroup>

<CfInputGroup>
<CfSelect value={protocol} onChange={setProtocol} options={protocols} />
<CfInput value={host} onChange={(e) => setHost(e.target.value)} placeholder="example.com" />
<CfButton>Visit</CfButton>
</CfInputGroup>

Leading and trailing addons

<span class="cf-input-group__addon"> can sit on either side of the input — common for currency or URL path prefixes/suffixes.

背景

¥RMB

https:///path

<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>

<CfInputGroup>
<span className="cf-input-group__addon">¥</span>
<CfInput value={price} onChange={(e) => setPrice(e.target.value)} placeholder="Price" />
<span className="cf-input-group__addon">RMB</span>
</CfInputGroup>

<CfInputGroup>
<span className="cf-input-group__addon">https://</span>
<CfInput value={url} onChange={(e) => setUrl(e.target.value)} placeholder="example.com" />
<span className="cf-input-group__addon">/path</span>
</CfInputGroup>

<CfInputGroup>
<span className="cf-input-group__addon">¥</span>
<CfInput value={price} onChange={(e) => setPrice(e.target.value)} placeholder="Price" />
<span className="cf-input-group__addon">RMB</span>
</CfInputGroup>

<CfInputGroup>
<span className="cf-input-group__addon">https://</span>
<CfInput value={url} onChange={(e) => setUrl(e.target.value)} placeholder="example.com" />
<span className="cf-input-group__addon">/path</span>
</CfInputGroup>

Equal-width stretch

stretch makes children share the parent width equally — handy for a full-row search box + submit button.

背景

<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>

<CfInputGroup stretch>
<CfInput value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search…" />
<CfButton variant="primary">Search</CfButton>
</CfInputGroup>

<CfInputGroup stretch>
<CfInput value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search…" />
<CfButton variant="primary">Search</CfButton>
</CfInputGroup>

API · Props

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Layout direction
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of static addons (controls keep their own size)
`stretch`	`boolean`	`false`	Children fill parent equally