---
title: Текст
image: /images/user-guide/notes/notes_header.png
---

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

## Унос текста

Омогућава корисницима да унесу и уређују текст.

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

| Својства           | Тип               | Опис                                                                                                                                |
| ------------------ | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| className          | низ               | Опционо име за додатно обликовање                                                                                                   |
| ознака             | низ               | Represents the label for the input                                                                                                  |
| приПромени         | функција          | Функција која се зове када се промени вредност уноса                                                                                |
| пунаШирина         | булевска вредност | Означава да ли би унос требао заузети 100% ширине                                                                                   |
| онемогућиПречице   | булевска вредност | Означава да ли су омогућене пречице за унос                                                                                         |
| грешка             | низ               | Представља поруку о грешци која треба бити приказана. Када је наведено, додаје и икону грешке са десне стране уноса |
| приПритискуТастера | функција          | Позива се када се притисне тастер док је поље уноса у фокусу. Прима `React.KeyboardEvent` као аргумент              |
| ИконаДесно         | КомпонентаИконе   | Опциона компонента иконе која се приказује са десне стране уноса                                                                    |

Компонента такође прихвата и друга својства HTML елемента уноса.

</Tab>

</Tabs>

## Autosize Text Input

Компонента уноса текста која аутоматски прилагођава своју висину у зависности од садржаја.

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

| Својства      | Тип      | Опис                                                                                           |
| ------------- | -------- | ---------------------------------------------------------------------------------------------- |
| приПровери    | функција | Функција повратног позива коју желите да покренете када корисник провери унос                  |
| минимумРедова | број     | Минималан број редова за текстуално поље                                                       |
| плацехолдер   | низ      | Текст замене који желите да прикажете када је текстуално поље празно                           |
| приФокусу     | функција | Функција повратног позива коју желите да покренете када текстуално поље добије фокус           |
| variant       | низ      | Варијанта уноса. Опције су: `подразумевани`, `икона` и `дугме` |
| насловДугмета | низ      | Наслов за дугме (примењује се само на варијанту дугмета)                    |
| вредност      | низ      | Почетна вредност за текстуално поље                                                            |

</Tab>

</Tabs>

## Текстуално поље

Омогућава вам да креирате вишередовне текстуалне уносе.

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

| Својства      | Тип               | Опис                                                                          |
| ------------- | ----------------- | ----------------------------------------------------------------------------- |
| онемогућено   | булевска вредност | Означава да ли је текстуално поље онемогућено                                 |
| минимумРедова | број              | Минималан број видљивих редова за текстуално поље.            |
| приПромени    | функција          | Функција на колбеку, која се покреће када се садржај текстуалног поља промени |
| плацехолдер   | низ               | Плацехолдер текст приказан када је текстуално поље празно                     |
| вредност      | низ               | Тренутна вредност текстуалног поља                                            |

</Tab>
</Tabs>