twenty/packages/twenty-docs/l/pl/twenty-ui/input/text.mdx

---
title: Tekst
image: /images/user-guide/notes/notes_header.png
---

<Frame>
  <img src="/images/user-guide/notes/notes_header.png" alt="Header" />
</Frame>

## Text Input

Umożliwia użytkownikom wprowadzanie i edycję tekstu.

<Tabs>

<Tab title="Usage">

```jsx
import { RecoilRoot } from "recoil";
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 (
    <RecoilRoot>
      <TextInput
        className
        label="Username"
        onChange={handleChange}
        fullWidth={false}
        disableHotkeys={false}
        error="Invalid username"
        onKeyDown={handleKeyDown}
        RightIcon={null}
      />
    </RecoilRoot>
  );
};

```

</Tab>

<Tab title="Props">

| Właściwości (Props) | Typ            | Opis                                                                                                                                    |
| -------------------------------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| nazwaKlasy                             | ciąg znaków    | Opcjonalna nazwa dla dodatkowego stylowania                                                                                             |
| etykieta                               | ciąg znaków    | Reprezentuje etykietę dla wprowadzenia                                                                                                  |
| onChange                               | funkcja        | Funkcja wywoływana, gdy zmienia się wartość wprowadzania                                                                                |
| pełnaSzerokość                         | boolean        | Wskazuje, czy wprowadzenie powinno zajmować 100% szerokości                                                                             |
| wyłączSkrótyKlawiaturowe               | boolean        | Wskazuje, czy skróty klawiaturowe są aktywne dla wprowadzenia                                                                           |
| błąd                                   | ciąg znaków    | Reprezentuje wiadomość o błędzie do wyświetlenia. Po podaniu, również dodaje ikonę błędu po prawej stronie wprowadzenia |
| przyNaciśnięciuKlawisza                | funkcja        | Wywołane, gdy klawisz jest naciśnięty, a pole wprowadzenia jest aktywne. Przyjmuje `React.KeyboardEvent` jako argument  |
| IkonaPoPrawej                          | KomponentIkony | Opcjonalny komponent ikony wyświetlany po prawej stronie wprowadzenia                                                                   |

The component also accepts other HTML input element props.

</Tab>

</Tabs>

## Autosize Text Input

Komponent wprowadzania tekstu, który automatycznie dostosowuje swoją wysokość w zależności od treści.

<Tabs>

<Tab title="Usage">

```jsx
import { RecoilRoot } from "recoil";
import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";

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

</Tab>

<Tab title="Props">

| Właściwości (Props) | Typ         | Opis                                                                                                    |
| -------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------- |
| poWalidacji                            | funkcja     | Funkcja wywoływana, gdy użytkownik zatwierdza wprowadzenie                                              |
| minimalneLiczbaWidocznychWierszy       | numer       | Minimalna liczba wierszy dla obszaru tekstowego                                                         |
| symbol zastępczy                       | ciąg znaków | Tekst pomocniczy do wyświetlenia, gdy obszar tekstowy jest pusty                                        |
| onFocus                                | funkcja     | Funkcja wywoływana, gdy obszar tekstowy zyskuje fokus                                                   |
| wariant                                | ciąg znaków | Wariant wprowadzenia. Opcje obejmują: `domyślny`, `ikona`, i `przycisk` |
| tytułPrzycisku                         | ciąg znaków | Tytuł dla przycisku (dotyczy tylko wariantu przycisku)                               |
| wartość                                | ciąg znaków | Wartość początkowa dla obszaru tekstowego                                                               |

</Tab>

</Tabs>

## Obszar tekstowy

Umożliwia tworzenie wielowierszowych pól wprowadzania tekstu.

<Tabs>
<Tab title="Usage">

```jsx
import { TextArea } from "@/ui/input/components/TextArea";

export const MyComponent = () => {
  return (
    <TextArea
    disabled={false}
    minRows={4}
    onChange={()=>console.log('On change function fired')}
    placeholder="Enter text here"
    value=""
    />
  );
};
```

</Tab>

<Tab title="Props">

| Właściwości (Props) | Typ         | Opis                                                                        |
| -------------------------------------- | ----------- | --------------------------------------------------------------------------- |
| wyłączony                              | boolean     | Wskazuje, czy obszar tekstowy jest wyłączony                                |
| minimalneLiczbaWidocznychWierszy       | numer       | Minimalna liczba widocznych wierszy dla obszaru tekstowego. |
| onChange                               | funkcja     | Funkcja zwrotna wywołana po zmianie zawartości pola tekstowego              |
| symbol zastępczy                       | ciąg znaków | Tekst zastępczy wyświetlany, gdy pole tekstowe jest puste                   |
| wartość                                | ciąg znaków | Bieżąca wartość pola tekstowego                                             |

</Tab>
</Tabs>