Preview Updated 2026-05-10

Textarea

Multi-line input — same color system as Input, with auto-resize, character count, and resize control.

Basic usage

Shares the same colors as Input. rows sets the initial row count; users can drag the bottom-right corner to resize.

背景

src/App.vue

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

const note = ref('');
</script>
<template>
  <CfTextarea v-model="note" placeholder="说点什么…" :rows="3" />
</template>

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

const note = ref('');
</script>
<template>
  <CfTextarea v-model="note" placeholder="说点什么…" :rows="3" />
</template>

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

export default function Demo() {
const [note, setNote] = useState('');
return (
  <CfTextarea
    value={note}
    onChange={(e) => setNote(e.target.value)}
    placeholder="Say something…"
    rows={3}
  />
);
}

Character count

maxlength enforces an upper bound (native limit). show-count displays the current character count in the bottom-right. Going over turns it red (though maxlength blocks input first).

背景

0 / 50

src/App.vue

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

const bio = ref('');
</script>
<template>
  <CfTextarea
    v-model="bio"
    placeholder="个人简介（最多 50 字）"
    :rows="3"
    :maxlength="50"
    show-count
  />
</template>

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

const bio = ref('');
</script>
<template>
  <CfTextarea
    v-model="bio"
    placeholder="个人简介（最多 50 字）"
    :rows="3"
    :maxlength="50"
    show-count
  />
</template>

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

export default function Demo() {
  const [bio, setBio] = useState('');
  return (
    <>
      <CfTextarea
      value={bio}
      onChange={(e) => setBio(e.target.value)}
      placeholder="Bio (max 50 chars)"
      rows={3}
      maxLength={50}
      showCount
      />
    </>
  );
}

Auto-resize

auto-resize makes the box grow with the content and hides the resize handle. Good when row count is unpredictable (comments, notes).

背景

src/App.vue

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

const draft = ref('试着多敲几行回车，框会自动撑高，没有滚动条。\n这是第二行。');
</script>
<template>
  <CfTextarea
    v-model="draft"
    variant="filled"
    auto-resize
    placeholder="自动撑高的多行输入"
  />
</template>

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

const draft = ref('试着多敲几行回车，框会自动撑高，没有滚动条。\n这是第二行。');
</script>
<template>
  <CfTextarea
    v-model="draft"
    variant="filled"
    auto-resize
    placeholder="自动撑高的多行输入"
  />
</template>

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

export default function Demo() {
  const [draft, setDraft] = useState('试着多敲几行回车，框会自动撑高，没有滚动条。\n这是第二行。');
  return (
    <>
      <CfTextarea
      value={draft}
      onChange={(e) => setDraft(e.target.value)}
      variant="filled"
      autoResize
      placeholder="Auto-resizing textarea"
      />
    </>
  );
}

API

Prop	Type	Default	Description
`variant`	`'outline' \| 'filled' \| 'ghost'`	`'outline'`	Visual variant, matches Input
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Font size / padding
`rows`	`number`	`3`	Initial row count
`resize`	`'none' \| 'vertical' \| 'horizontal' \| 'both'`	`'vertical'`	User-resize behavior
`autoResize`	`boolean`	`false`	Auto-fit height to content (overrides `resize`)
`error`	`boolean`	`false`	Error border / focus ring
`maxlength`	`number`	—	Character cap (`maxLength` in React)
`showCount`	`boolean`	`false`	Show character count in the bottom-right