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

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

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

## Tekstisyöte

Allows users to enter and edit text.

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

| Ominaisuudet   | Tyyppi           | Kuvaus                                                                                                                               |
| -------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| className      | merkkijono       | Valinnainen nimi lisätyyliksi                                                                                                        |
| label          | merkkijono       | Represents the label for the input                                                                                                   |
| onChange       | funktio          | The function called when the input value changes                                                                                     |
| kokoLeveys     | looginen         | Indicates whether the input should take up 100% of the width                                                                         |
| disableHotkeys | looginen         | Indicates whether hotkeys are enabled for the input                                                                                  |
| virhe          | merkkijono       | Represents the error message to be displayed. Kun annettuna, lisää myös virheen kuvakkeen syötteen oikealle puolelle |
| onKeyDown      | toiminto         | Called when a key is pressed down while the input field is focused. Vastaanottaa `React.KeyboardEvent` argumenttina  |
| RightIcon      | IkoniKomponentti | Valinnainen ikonikomponentti, joka näytetään syötteen oikealla puolella                                                              |

Komponentti hyväksyy myös muut HTML-syötteen elementtien attribuutit.

</Tab>

</Tabs>

## Autosize Text Input

Text input component that automatically adjusts its height based on the content.

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

| Ominaisuudet | Tyyppi     | Kuvaus                                                                                               |
| ------------ | ---------- | ---------------------------------------------------------------------------------------------------- |
| onValidate   | funktio    | The callback function you want to trigger when the user validates the input                          |
| minRivit     | numero     | The minimum number of rows for the text area                                                         |
| paikkamerkki | merkkijono | The placeholder text you want to display when the text area is empty                                 |
| onFocus      | funktio    | The callback function you want to trigger when the text area gains focus                             |
| variantti    | string     | Syötteen variantti. Options include: `default`, `icon`, and `button` |
| buttonTitle  | merkkijono | The title for the button (only applicable for the button variant)                 |
| arvo         | string     | The initial value for the text area                                                                  |

</Tab>

</Tabs>

## Tekstialue

Mahdollistaa monirivisten tekstisyötteiden luomisen.

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

| Ominaisuudet  | Tyyppi     | Kuvaus                                                              |
| ------------- | ---------- | ------------------------------------------------------------------- |
| pois käytöstä | looginen   | Indicates whether the text area is disabled                         |
| minRivit      | numero     | Vähimmäismäärä näkyviä rivejä tekstialueelle.       |
| onChange      | toiminto   | Takaisinkutsu-funktio laukaistaan, kun tekstialueen sisältö muuttuu |
| paikkamerkki  | merkkijono | Paikkamerkkiteksti näkyy, kun tekstialue on tyhjä                   |
| arvo          | merkkijono | Tekstialueen nykyinen arvo                                          |

</Tab>
</Tabs>