Textarea

Prezentare generală

Utilizați Textarea pentru note, descrieri și alte valori pe mai multe linii. Se integrează cu Câmp pentru etichete și validare.

Utilizare

Stare necontrolată

Utilizați defaultValue pentru a seta notițele inițiale. Zona de text gestionează modificările ulterioare.

import { Field, Textarea } from 'twenty-ui/primitives/input';

export const NotesField = () => (
  <Field.Root name="notes">
    <Field.Label>Notes</Field.Label>
    <Textarea rows={4} defaultValue="Follow up next week." />
    <Field.Description>Add context for your team.</Field.Description>
  </Field.Root>
);

Sunt disponibile atribute native pentru zona de text, precum rows, maxLength, required și readOnly. size acceptă sm sau md și are valoarea implicită md.

Opțiuni vizuale

Comparați cele două dimensiuni în stările implicită, focalizată, nevalidă și dezactivată. Redimensionarea automată este prezentată separat mai jos.

Aspect simplu

Utilizați variant="plain" pentru text pe mai multe rânduri într-o suprafață existentă. Elimină umplerea, bordura, colțurile rotunjite și toată spațierea interioară, păstrând stilizarea comună pentru text, substituent și starea dezactivată. Conturul albastru urmează comportamentul nativ :focus-visible al browserului. Pentru controalele de text, aceasta poate include focalizarea cu indicatorul și focalizarea automată, precum și focalizarea cu tastatura. Starea nevalidă utilizează un contur de pericol fără a modifica aspectul.

import { Field, Textarea } from 'twenty-ui/primitives/input';

export const InlineNotes = () => (
  <Field.Root>
    <Field.Label>Notes</Field.Label>
    <Textarea variant="plain" autoResize rows={1} maxRows={6} />
  </Field.Root>
);

Elementul părinte furnizează spațierea. rows, maxRows și dimensionarea automată controlează în continuare înălțimea conținutului. Limita de rânduri exclude spațierea interioară și bordurile în aspectul simplu. Modificarea lui variant în timp ce dimensionarea automată este activată măsoară noul aspect.

Stare controlată

Transmiteți value și actualizați-l cu onValueChange pentru a gestiona aceleași notițe în starea React. Funcția callback primește următoarea valoare de tip șir și detaliile evenimentului; este disponibil și onChange nativ.

import { useState } from 'react';
import { Field, Textarea } from 'twenty-ui/primitives/input';

export const NotesField = () => {
  const [notes, setNotes] = useState('Follow up next week.');

  return (
    <Field.Root name="notes">
      <Field.Label>Notes</Field.Label>
      <Textarea rows={4} value={notes} onValueChange={setNotes} />
      <Field.Description>Add context for your team.</Field.Description>
    </Field.Root>
  );
};

Redimensionare automată

Redimensionarea automată funcționează în oricare dintre modurile de stare. Acest exemplu utilizează, de asemenea, valoarea controlată pentru un număr de caractere.

import { useState } from 'react';
import { Field, Textarea } from 'twenty-ui/primitives/input';

export const DescriptionField = () => {
  const [description, setDescription] = useState('');

  return (
    <Field.Root name="description">
      <Field.Label>Description</Field.Label>
      <Textarea
        value={description}
        onValueChange={setDescription}
        autoResize
        rows={2}
        maxRows={6}
        maxLength={500}
      />
      <Field.Description>
        {description.length} of 500 characters
      </Field.Description>
    </Field.Root>
  );
};

autoResize măsoară valoarea aplicată după actualizările controlate și măsoară direct modificările necontrolate. Modificările controlate respinse nu schimbă înălțimea. De asemenea, se actualizează după resetările native ale formularului, modificările pentru rows, size, variant, maxRows și lățimea disponibilă. Utilizează maxRows pentru a limita creșterea și a derula conținutul mai lung. Dimensionarea automată controlează blockSize inline cât timp este activată. Dezactivarea acesteia restaurează valoarea curentă style.blockSize sau elimină dimensiunea automată dacă nu este furnizată niciuna. Când dimensionarea automată este dezactivată, rows și stilurile native controlează înălțimea. Redimensionarea manuală este dezactivată implicit; setează style={{ resize: 'vertical' }} atunci când apelanții trebuie să redimensioneze ei înșiși controlul.

Control nativ și compunerea randării

Atributele și gestionarii zonei de text native, className, style și ref vizează zona de text. Referința primește un HTMLTextAreaElement. render acceptă un element de zonă de text sau un callback care primește proprietățile native ale zonei de text și starea Field. Transmite proprietățile și referința furnizate către zona de text nativă, astfel încât etichetele, validarea, evenimentele și măsurarea automată să continue să funcționeze. Adaugă un element de aspect separat atunci când este necesară personalizarea învelișului. onChange primește un eveniment de modificare React pentru zona de text nativă. onValueChange(value, details) păstrează semnătura Base UI, inclusiv event, reason, cancel și allowPropagation native. Evenimentul nativ vizează zona de text. Anularea detaliilor păstrează politica de validare a Base UI; nu anulează valoarea nativă. Apelanții controlați aleg valoarea aplicată. name, form, required, readOnly, disabled native, comportamentul de trimitere și cel de resetare rămân disponibile. Field furnizează asocierea pentru etichetă, descriere, nume și validare. Enter inserează un salt de linie în zona de text.

Proprietăți

Referința este generată din tipurile publice ale componentei. Atributele native, inclusiv numele accesibile și gestionarele de evenimente, sunt acceptate și pe părțile care redau elemente.

boolean

implicit:"false"

Measures committed controlled values or uncontrolled edits, form resets, row, size and variant changes, and width changes. Overrides blockSize while enabled.

string | ((state: InputState) => string | undefined)

CSS class applied to the textarea, or a function that returns a class based on the input state.

number

Caps automatic height growth. Content beyond this row limit scrolls.

((value: string, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) => void)

Receives the next string value and Base UI details, including the native event, reason and cancellation methods.

Ref<HTMLTextAreaElement>

Ref to the native textarea element.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, InputState>

Composes the native textarea with a custom element or callback receiving textarea props and Field state. Forward the supplied props and ref to a textarea.

"md" | "sm"

implicit:"md"

Visual size of the textarea.

"default" | "plain"

implicit:"default"

default keeps the field frame. plain removes fill, border, radius and padding while retaining rows, automatic sizing and maximum rows. Its outline follows native :focus-visible, including pointer focus or autofocus on textareas; invalid state uses a danger outline.

Dezvoltatori

Aplicații

API

Autogazda

Contribuie

Biblioteca UI

Prezentare generală

Utilizare

Stare necontrolată

Opțiuni vizuale

Aspect simplu

Stare controlată

Redimensionare automată

Control nativ și compunerea randării

Proprietăți

​Prezentare generală

​Utilizare

​Stare necontrolată

​Opțiuni vizuale

​Aspect simplu

​Stare controlată

​Redimensionare automată

​Control nativ și compunerea randării

​Proprietăți

Prezentare generală

Utilizare

Stare necontrolată

Opțiuni vizuale

Aspect simplu

Stare controlată

Redimensionare automată

Control nativ și compunerea randării

Proprietăți