开发预览更新于 2026-05-10

FieldRow 字段行

表单字段统一外壳：label / 必填星标 / hint / 错误信息 / 控件容器。

基础用法

CfFieldRow 把 label、required 星标、hint、错误信息和控件包装成一行；不依赖任何特定输入组件，原生 <input> 或 CfInput 都行。

背景视口

姓名

2 - 20 字

邮箱

备注

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfFieldRow } from '@chufix-design/vue';

const name = ref('');
const email = ref('');
</script>
<template>
  <div class="demo-scope">
    <CfFieldRow label="姓名" required hint="2 - 20 字">
      <input class="cf-input" v-model="name" placeholder="请输入" />
    </CfFieldRow>
    <CfFieldRow label="邮箱" :error="email && !/@/.test(email) ? '邮箱格式不正确' : undefined">
      <input class="cf-input" v-model="email" placeholder="[email protected]" />
    </CfFieldRow>
    <CfFieldRow label="备注" layout="horizontal">
      <textarea class="cf-textarea" rows="2" placeholder="可选" />
    </CfFieldRow>
  </div>
</template>
<style scoped>
.demo-scope { display: flex; flex-direction: column; gap: 12px; max-width: 480px; }
</style>

<script setup>
import { ref } from 'vue';
import { CfFieldRow } from '@chufix-design/vue';

const name = ref('');
const email = ref('');
</script>
<template>
  <div class="demo-scope">
    <CfFieldRow label="姓名" required hint="2 - 20 字">
      <input class="cf-input" v-model="name" placeholder="请输入" />
    </CfFieldRow>
    <CfFieldRow label="邮箱" :error="email && !/@/.test(email) ? '邮箱格式不正确' : undefined">
      <input class="cf-input" v-model="email" placeholder="[email protected]" />
    </CfFieldRow>
    <CfFieldRow label="备注" layout="horizontal">
      <textarea class="cf-textarea" rows="2" placeholder="可选" />
    </CfFieldRow>
  </div>
</template>
<style scoped>
.demo-scope { display: flex; flex-direction: column; gap: 12px; max-width: 480px; }
</style>

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

export default function Demo() {
  return (
    <>
      <CfFieldRow label="姓名" required hint="2 - 20 字">
      <input className="cf-input" />
      </CfFieldRow>
    </>
  );
}

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

export default function Demo() {
  return (
    <>
      <CfFieldRow label="姓名" required hint="2 - 20 字">
      <input className="cf-input" />
      </CfFieldRow>
    </>
  );
}

API

属性	类型	默认	说明
`label`	`string`	—	字段标题
`required`	`boolean`	`false`	显示必填星标
`hint`	`string`	—	提示文案，错误显示时被隐藏
`error`	`string`	—	错误信息，存在时控件加红色边框
`htmlFor`	`string`	—	关联控件 id
`layout`	`'vertical' \| 'horizontal'`	`'vertical'`	标签位置
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	字体 / 间距尺寸
`extraLabel`	`slot` / `ReactNode`	—	右上角辅助文字（例如 “可选”）