Textarea

حقل نصي متعدد الأسطر يتمدّد مع محتواه.

المتصفحات: Chrome 123+Firefox 152+
لماذا هذا الإصدار؟
The auto-sized textarea uses CSS field-sizing: content. Older Firefox versions keep the textarea at its fixed size as text is entered.
Safari 26.2+
لماذا هذا الإصدار؟
The auto-sized textarea uses CSS field-sizing: content. Older Safari versions keep the textarea at its fixed size as text is entered.
الفئة: 0
الحجم المضغوط: 348 B
ميزانية التخطيط القسري: 0 ms
ميزانية axe: 0
متوافق مع SSR: نعم
العقد المنشور: بيئة الاختبار

المختبر

Textarea

Default

Autosize

React

CSS

Tailwind

/* Text fields — Input and Textarea share the same surface. Invalid state keys
   off the [data-invalid] attribute the components emit. Textarea autosize uses
   the native field-sizing (Chrome 123+) when the component sets data-autosize. */

@layer components {
  :where([data-uiify-input], [data-uiify-textarea]) {
    display: block;
    inline-size: 100%;
    max-inline-size: 24rem;
    padding-block: var(--space-sm);
    padding-inline: var(--space-md);
    border: var(--border-width) solid var(--input);
    border-radius: var(--radius-md);
    corner-shape: squircle;
    background-color: var(--card);
    color: var(--foreground);
    font-size: var(--uiify-control-text);
    line-height: var(--leading-normal);
    transition: var(--transition-colors);
  }

  :where([data-uiify-input], [data-uiify-textarea])::placeholder {
    color: var(--muted-foreground);
  }

  :where([data-uiify-input], [data-uiify-textarea]):focus-visible {
    border-color: var(--primary);
  }

  :where([data-uiify-input], [data-uiify-textarea]):disabled,
  :where([data-uiify-input], [data-uiify-textarea])[data-disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  :where([data-uiify-input], [data-uiify-textarea])[data-invalid],
  :where([data-uiify-input], [data-uiify-textarea]):user-invalid {
    border-color: var(--destructive);
  }

  :where([data-uiify-input], [data-uiify-textarea])[data-invalid]:focus-visible {
    outline-color: var(--destructive);
  }

  [data-uiify-textarea] {
    min-block-size: 4lh;
    resize: block;
  }

  [data-uiify-textarea][data-autosize] {
    field-sizing: content;
    resize: none;
  }

  [data-uiify-field] {
    display: grid;
    gap: var(--space-sm);
    inline-size: 100%;
    max-inline-size: 24rem;
  }

  [data-uiify-field] [data-part="label"] {
    color: var(--foreground);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: var(--leading-normal);
  }

  [data-uiify-field] [data-part="label"][data-required]::after {
    content: " *";
    color: var(--destructive);
  }

  [data-uiify-field] [data-part="description"] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
  }

  [data-uiify-field] [data-part="error"] {
    margin: 0;
    color: var(--destructive);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
  }

  /* Shared presence fade when an error message is mounted. */
  @media (prefers-reduced-motion: no-preference) {
    [data-uiify-field] [data-part="error"] {
      transition: opacity var(--duration-fast) var(--ease-out);
    }

    @starting-style {
      [data-uiify-field] [data-part="error"] {
        opacity: 0;
      }
    }
  }
}

import { Textarea } from "@gunkin/uiify";

export default function Example() {
  return (
    <Textarea
      className="
        focus-visible:[outline:none]
        focus-visible:[box-shadow:0_0_0_var(--ring-width)_color-mix(in_oklch,_var(--ring)_16%,_transparent)] block
        [inline-size:100%] [max-inline-size:24rem] py-sm px-md border-[length:var(--border-width)] border-solid
        border-input rounded-md [corner-shape:squircle] bg-card text-foreground [font-size:var(--uiify-control-text)]
        [line-height:var(--leading-normal)] [transition:var(--transition-colors)] placeholder:text-muted-foreground
        focus-visible:border-primary disabled:opacity-50 disabled:cursor-not-allowed data-[disabled]:opacity-50
        data-[disabled]:cursor-not-allowed data-[invalid]:border-destructive user-invalid:border-destructive
        data-[invalid]:focus-visible:outline-destructive [min-block-size:4lh] [resize:block]
        data-[autosize]:[field-sizing:content] data-[autosize]:resize-none
      "
      aria-label="Notes"
      name="notes"
      autoSize
    />
  );
}

/* app.css */

@layer reset, ui, app, tokens, base, demo, components, utilities, theme;

@import "@gunkin/uiify/styles/reset";

@import "@gunkin/uiify/components/behavior.css";

@import "@gunkin/uiify/styles/tokens";

@import "@gunkin/uiify/styles/tailwind";

@import "tailwindcss/utilities.css";

@theme { --spacing: 0.25rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; }

@source inline('focus-visible:[outline:none] focus-visible:[box-shadow:0_0_0_var(--ring-width)_color-mix(in_oklch,_var(--ring)_16%,_transparent)] block [inline-size:100%] [max-inline-size:24rem] py-sm px-md border-[length:var(--border-width)] border-solid border-input rounded-md [corner-shape:squircle] bg-card text-foreground [font-size:var(--uiify-control-text)] [line-height:var(--leading-normal)] [transition:var(--transition-colors)] placeholder:text-muted-foreground focus-visible:border-primary disabled:opacity-50 disabled:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed data-[invalid]:border-destructive user-invalid:border-destructive data-[invalid]:focus-visible:outline-destructive [min-block-size:4lh] [resize:block] data-[autosize]:[field-sizing:content] data-[autosize]:resize-none');

@layer base { :root { --uiify-control-text: var(--text-sm); } @media (pointer: coarse) { :root { --uiify-control-text: var(--text-base); } } }

/* Authored animation and registered properties used by the Tailwind skin.
 * Visual rules belong in utility recipes; only at-rule definitions live here. */
@layer components {
  @keyframes uiify-presence-in {
    from {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@layer components {
  @keyframes uiify-presence-out {
    to {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@property --uiify-spinner-tail {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --uiify-spinner-length {
  syntax: "<angle>";
  inherits: false;
  initial-value: 36deg;
}

@layer components {
  @keyframes uiify-spinner-rotate {
    to {
      transform: rotate(360deg);
    }
  }
}

@layer components {
  @keyframes uiify-spinner-orbit {
    0% {
      --uiify-spinner-tail: 0deg;
      --uiify-spinner-length: 36deg;
    }

    50% {
      --uiify-spinner-tail: 90deg;
      --uiify-spinner-length: 324deg;
    }

    100% {
      --uiify-spinner-tail: 360deg;
      --uiify-spinner-length: 36deg;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-pulse {
    50% {
      opacity: 0.45;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-shimmer {
    to {
      background-position: -200% 0;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-reveal {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

@property --candle-body-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-body-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-slot {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 100%;
}

@property --candle-wick-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-wick-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --line-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-prev-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-count {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

@property --line-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@layer components {
  @keyframes uiify-otp-input-caret-blink {
    50% {
      opacity: 0;
    }
  }
}

API

`Textarea`

الخاصية	النوع	افتراضي	الوصف
`value`	`string`	—	القيمة الحالية، وتجعل textarea متحكّمًا بها.
`defaultValue`	`string`	—	القيمة الأولية لـ textarea غير المتحكّم بها، ويتولى العنصر الأصلي إدارتها بعدها.
`onValueChange`	`(value: string) => void`	—	تُستدعى بالقيمة الجديدة كلما تغيّرت textarea.
`autoSize`	`boolean`	`false`	يوسّع textarea مع محتواها باستخدام CSS field-sizing، دون JavaScript.
`disabled`	`boolean`	`false`	يعطّل textarea الأصلية ويعيّن سمة data-disabled.
`readOnly`	`boolean`	`false`	يجعل القيمة للقراءة فقط مع إبقاء textarea قابلة للتركيز.
`invalid`	`boolean`	`false`	يعلّم textarea كغير صالحة عبر aria-invalid وسمة data-invalid.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	استبدل العنصر المعروض مع الحفاظ على توصيلات السلوك وإمكانية الوصول.

لوحة المفاتيح

المفتاح	الإجراء
`Tab`	نقل التركيز إلى عنصر التحكم أو منه
`Enter` / `Space`	التفعيل عند التركيز (لعناصر التحكم الشبيهة بالأزرار)

إمكانية الوصول

يستخدم HTML الدلالي متى أمكن. افحص بنية HTML المعروضة في المختبر؛ لا تُضاف ARIA إلا حين لا تكفي العناصر الأصلية.

نقاط التنسيق

data-disabled

إطار العمل

التنسيق

المظهر

اللغة

Textarea

المختبر

Textarea

Default

Autosize

API

`Textarea`

لوحة المفاتيح

إمكانية الوصول

نقاط التنسيق