Preview Updated 2026-05-10

FormSection 表单分组

给表单切分逻辑段落 — 标题 / 描述 / 锚点 / 可折叠。

English translation pending This page hasn't been translated yet — falling back to Chinese. PRs welcome on GitHub.

基础用法

长表单建议拆成若干 CfFormSection：标题 + 描述 + 内部任意控件。anchor 给出 id 方便通过 CfToc 跳转；collapsible 让进阶字段可折叠。

背景视口

账号信息

登录所需的基础字段

高级设置

src/App.vue

<script setup lang="ts">
import { CfFormSection, CfFormGrid, CfFieldRow } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-scope">
    <CfFormSection title="账号信息" description="登录所需的基础字段" anchor="account">
      <CfFormGrid :columns="2">
        <CfFieldRow label="账号"><input class="cf-input" /></CfFieldRow>
        <CfFieldRow label="邮箱"><input class="cf-input" /></CfFieldRow>
      </CfFormGrid>
    </CfFormSection>
    <CfFormSection title="高级设置" collapsible :defaultOpen="false">
      <CfFieldRow label="API 端点" hint="高级用户可自定义">
        <input class="cf-input" />
      </CfFieldRow>
    </CfFormSection>
  </div>
</template>
<style scoped>
.demo-scope { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
</style>

<script setup>
import { CfFormSection, CfFormGrid, CfFieldRow } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-scope">
    <CfFormSection title="账号信息" description="登录所需的基础字段" anchor="account">
      <CfFormGrid :columns="2">
        <CfFieldRow label="账号"><input class="cf-input" /></CfFieldRow>
        <CfFieldRow label="邮箱"><input class="cf-input" /></CfFieldRow>
      </CfFormGrid>
    </CfFormSection>
    <CfFormSection title="高级设置" collapsible :defaultOpen="false">
      <CfFieldRow label="API 端点" hint="高级用户可自定义">
        <input class="cf-input" />
      </CfFieldRow>
    </CfFormSection>
  </div>
</template>
<style scoped>
.demo-scope { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
</style>

import { CfFieldRow, CfFormGrid, CfFormSection } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <div className="demo-scope">
          <CfFormSection title="账号信息" description="登录所需的基础字段" anchor="account">
            <CfFormGrid columns={2}>
              <CfFieldRow label="账号"><input className="cf-input" /></CfFieldRow>
              <CfFieldRow label="邮箱"><input className="cf-input" /></CfFieldRow>
            </CfFormGrid>
          </CfFormSection>
          <CfFormSection title="高级设置" collapsible defaultOpen={false}>
            <CfFieldRow label="API 端点" hint="高级用户可自定义">
              <input className="cf-input" />
            </CfFieldRow>
          </CfFormSection>
        </div>
    </>
  );
}

import { CfFieldRow, CfFormGrid, CfFormSection } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <div className="demo-scope">
          <CfFormSection title="账号信息" description="登录所需的基础字段" anchor="account">
            <CfFormGrid columns={2}>
              <CfFieldRow label="账号"><input className="cf-input" /></CfFieldRow>
              <CfFieldRow label="邮箱"><input className="cf-input" /></CfFieldRow>
            </CfFormGrid>
          </CfFormSection>
          <CfFormSection title="高级设置" collapsible defaultOpen={false}>
            <CfFieldRow label="API 端点" hint="高级用户可自定义">
              <input className="cf-input" />
            </CfFieldRow>
          </CfFormSection>
        </div>
    </>
  );
}

API

属性	类型	默认	说明
`title`	`string`	—	区段标题
`description`	`string`	—	描述文字
`anchor`	`string`	—	区段 id，用于 Toc / 链接锚点
`collapsible`	`boolean`	`false`	是否可折叠
`defaultOpen`	`boolean`	`true`	折叠状态初始值
`open`	`boolean`	—	受控展开（与 `onOpenChange` 配合）