nili/ui
enfaartr
كل المكوّنات

TextArea

عرض شامل
١٠ تصدير٥ محور تنويع٣١ خاصيّة٤ ملف
import { TextArea, TextAreaResize } from '@nili/ui';

هذه صفحة العرض الشامل الخاصة بالمكتبة، معروضة حيّة. غيّر اللغة أو السمة من الأعلى وسَتتبعك.

التسمية والتلميح والخطأ

وجود error هو ما يجعل الحقل غير صالح، فلا يتناقض الإطار مع الرسالة أبدًا — ولا توجد راية invalid منفصلة كي تُنسى.

الماركداون مدعوم.

import { TextArea } from "@nili/ui"

export function Example() {
  return (
    <>
      <TextArea
        label="Description"
        placeholder="Tell us a little about the project…"
        hint="Markdown is supported."
        rows={4}
      />

      <TextArea
        label="Description"
        defaultValue="Too short"
        error="Please write at least twenty characters."
        rows={4}
      />
    </>
  )
}

عدّاد الأحرف

يضع showCount النسبة used / limit تحت الحقل. ويضبط countLimit حدًّا مرنًا دون ضبط maxLength — فـmaxLength الصارمة تبتلع آخر ما يُلصق بصمت، وهذا أسوأ من إخبار المستخدم بتجاوزه الحد.

0/120
0 من 200
import { TextArea } from "@nili/ui"

export function Example() {
  const [value, setValue] = useState("")

  return (
    <>
      {/* soft limit: typing past it is allowed, and shown */}
      <TextArea
        label="Bio"
        showCount
        countLimit={120}
        value={value}
        onChange={(e) => setValue(e.target.value)}
        rows={3}
      />

      {/* hard limit */}
      <TextArea label="Tweet" showCount maxLength={280} rows={3} />

      {/* custom format */}
      <TextArea
        label="Notes"
        showCount
        countLimit={200}
        formatCount={(used, limit) => `${used} of ${limit}`}
        rows={3}
      />
    </>
  )
}

مقابض تغيير الحجم

أي المقابض يقدّمها المتصفّح. القيمة vertical هي الافتراضية، وnone لحقل داخل تخطيط ضيّق يجب ألا يُسحب فيفقد شكله.

resize=vertical
resize=both
resize=none
import { TextArea } from "@nili/ui"

export function Example() {
  return (
    <>
      <TextArea label="Vertical (default)" resize="vertical" rows={3} />
      <TextArea label="Both axes" resize="both" rows={3} />
      <TextArea label="Fixed" resize="none" rows={3} />
    </>
  )
}

تغيير الحجم التلقائي

ينمو مع المحتوى بدل التمرير، حتى maxRows. وهو مطفأ افتراضيًا: فحقل يتغيّر حجمه مع كل ضغطة يحرّك كل ما تحته، وهذا مزعج في نموذج طويل.

import { TextArea } from "@nili/ui"

export function Example() {
  return (
    <TextArea
      label="Message"
      autoResize
      maxRows={8}
      rows={2}
      placeholder="Type a few lines…"
    />
  )
}