الانتقال إلى المحتوى الرئيسي
رأس الصفحة

إدخال نص

يسمح للمستخدمين بإدخال وتحرير النص.
import { TextInput } from "@/ui/input/components/TextInput";

export const MyComponent = () => {
  const handleChange = (text) => {
    console.log("Input changed:", text);
  };

  const handleKeyDown = (event) => {
    console.log("Key pressed:", event.key);
  };

  return (
    <TextInput
      className
      label="Username"
      onChange={handleChange}
      fullWidth={false}
      disableHotkeys={false}
      error="Invalid username"
      onKeyDown={handleKeyDown}
      RightIcon={null}
    />
  );
};

إدخال نص بالحجم التلقائي

مكون إدخال نصي يعدل ارتفاعه تلقائيًا بناءً على المحتوى.
import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";

export const MyComponent = () => {
  return (
    <AutosizeTextInput
      onValidate={() => console.log("onValidate function fired")}
      minRows={1}
      placeholder="Write a comment"
      onFocus={() => console.log("onFocus function fired")}
      variant="icon"
      buttonTitle
      value="Task: "
    />
  );
};

مساحة نصية

تتيح لك إنشاء إدخالات نصية متعددة الأسطر.
import { TextArea } from "@/ui/input/components/TextArea";

export const MyComponent = () => {
  return (
    <TextArea
    disabled={false}
    minRows={4}
    onChange={()=>console.log('تم تشغيل الدالة onChange')}
    placeholder="أدخل النص هنا"
    value=""
    />
  );
};