Textarea

Panoramica

Usa Textarea per note, descrizioni e altri valori su più righe. Si integra con Campo per etichette e convalida.

Utilizzo

Stato non controllato

Usa defaultValue per impostare le note iniziali. L’area di testo gestisce le modifiche successive.

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>
);

Sono disponibili attributi textarea nativi quali rows, maxLength, required e readOnly. size accetta sm o md e il valore predefinito è md.

Opzioni visive

Confronta le due dimensioni negli stati predefinito, attivo, non valido e disabilitato. Il ridimensionamento automatico è illustrato separatamente di seguito.

Aspetto semplice

Usa variant="plain" per il testo su più righe all’interno di una superficie esistente. Rimuove il riempimento, il bordo, gli angoli arrotondati e tutta la spaziatura interna, mantenendo gli stili condivisi per testo, segnaposto e stato disabilitato. Il contorno blu segue il comportamento nativo :focus-visible del browser. Per i controlli di testo, ciò può includere lo stato attivo tramite puntatore e autofocus, oltre allo stato attivo tramite tastiera. Lo stato non valido usa un contorno di pericolo senza modificare il layout.

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>
);

L’elemento padre fornisce la spaziatura. rows, maxRows e il dimensionamento automatico controllano ancora l’altezza del contenuto. Il limite di righe esclude la spaziatura interna e i bordi nell’aspetto semplice. La modifica di variant mentre il dimensionamento automatico è abilitato misura il nuovo layout.

Stato controllato

Passa value e aggiornalo con onValueChange per gestire le stesse note nello stato di React. Il callback riceve il valore della stringa successiva e i dettagli dell’evento; è disponibile anche onChange nativo.

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>
  );
};

Ridimensionamento automatico

Il ridimensionamento automatico funziona in entrambe le modalità di stato. Questo esempio usa anche il valore controllato per un conteggio dei caratteri.

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 misura il valore confermato dopo gli aggiornamenti controllati e misura direttamente le modifiche non controllate. Le modifiche controllate rifiutate non cambiano l’altezza. Si aggiorna anche dopo i ripristini nativi del modulo e le modifiche a rows, size, variant, maxRows e alla larghezza disponibile. Usa maxRows per limitare la crescita e scorrere i contenuti più lunghi. Il ridimensionamento automatico gestisce blockSize inline quando è abilitato. Disabilitandolo viene ripristinato il valore corrente di style.blockSize oppure viene cancellata la dimensione automatica se non ne viene fornita una. Con il ridimensionamento automatico disattivato, rows e gli stili nativi controllano l’altezza. Il ridimensionamento manuale è disabilitato per impostazione predefinita; imposta style={{ resize: 'vertical' }} quando i chiamanti devono ridimensionare autonomamente il controllo.

Composizione del controllo nativo e del rendering

Gli attributi e i gestori nativi della textarea, className, style e ref si applicano alla textarea. Il ref riceve un HTMLTextAreaElement. render accetta un elemento textarea o una callback che riceve le props della textarea nativa e lo stato di Field. Inoltra le props e il ref forniti alla textarea nativa affinché etichette, convalida, eventi e misurazione automatica continuino a funzionare. Aggiungi un elemento di layout separato quando è necessaria la personalizzazione del wrapper. onChange riceve un evento di modifica React per la textarea nativa. onValueChange(value, details) mantiene la firma di Base UI, inclusi event, reason, cancel e allowPropagation nativi. L’evento nativo ha come destinazione la textarea. L’annullamento dei dettagli preserva la politica di convalida di Base UI; non annulla il valore nativo. I chiamanti controllati scelgono il valore confermato. I comportamenti nativi di name, form, required, readOnly, disabled, invio e ripristino restano disponibili. Field fornisce l’associazione con etichetta, descrizione, nome e convalida. Invio inserisce un’interruzione di riga nella textarea.

Props

Il riferimento è generato dai tipi pubblici del componente. Gli attributi nativi, inclusi nomi accessibili e gestori di eventi, sono accettati anche nelle parti che eseguono il rendering di elementi.

boolean

predefinito:"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"

predefinito:"md"

Visual size of the textarea.

"default" | "plain"

predefinito:"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.

Sviluppatori

App

API

Auto-ospitazione

Contribuire

Libreria UI

Panoramica

Utilizzo

Stato non controllato

Opzioni visive

Aspetto semplice

Stato controllato

Ridimensionamento automatico

Composizione del controllo nativo e del rendering

Props

​Panoramica

​Utilizzo

​Stato non controllato

​Opzioni visive

​Aspetto semplice

​Stato controllato

​Ridimensionamento automatico

​Composizione del controllo nativo e del rendering

​Props

Panoramica

Utilizzo

Stato non controllato

Opzioni visive

Aspetto semplice

Stato controllato

Ridimensionamento automatico

Composizione del controllo nativo e del rendering

Props