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

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

## Tekstindgang

Gør det muligt for brugerne at indtaste og redigere tekst.

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

| Egenskaber     | Type          | Beskrivelse                                                                                                                     |
| -------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| className      | streng        | Valgfrit navn til yderligere styling                                                                                            |
| label          | string        | Repræsenterer etiketten for inputfeltet                                                                                         |
| onChange       | funktion      | Funktionen kaldt, når inputværdien ændres                                                                                       |
| fuldBredde     | boolean       | Angiver, om inputtet skal optage 100% af bredden                                                                                |
| disableHotkeys | boolean       | Angiver, om genvejstaster er aktiveret for input                                                                                |
| fejl           | streng        | Repræsenterer fejlbeskeden, der skal vises. Når medfølger, tilføjer det også et fejlikon på højre side af input |
| onKeyDown      | funktion      | Kaldes, når en tast trykkes ned, mens feltet er fokuseret. Modtager en `React.KeyboardEvent` som et argument    |
| RightIcon      | IkonKomponent | En valgfri ikonkomponent vist på højre side af input                                                                            |

Komponenten accepterer også andre HTML-inputelement rekvisitter.

</Tab>

</Tabs>

## Autosize Text Input

Tekstindgangskomponent, der automatisk justerer sin højde baseret på indholdet.

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

| Egenskaber  | Type     | Beskrivelse                                                                                               |
| ----------- | -------- | --------------------------------------------------------------------------------------------------------- |
| onValidate  | funktion | Tilbagekaldningsfunktionen, du ønsker at udløse, når brugeren validerer inputtet                          |
| minRows     | tal      | Minimum antal rækker for tekstområdet                                                                     |
| pladsholder | string   | Pladsholderteksten, du ønsker at vise, når tekstområdet er tomt                                           |
| onFocus     | funktion | Tilbagekaldningsfunktionen, du ønsker at udløse, når tekstområdet får fokus                               |
| variant     | streng   | Varianten af input. Muligheder inkluderer: `default`, `icon`, og `button` |
| knapTitel   | streng   | Titlen for knappen (kun anvendelig for knapvarianten)                                  |
| værdi       | streng   | Den indledende værdi for tekstområdet                                                                     |

</Tab>

</Tabs>

## Tekstområde

Giver dig mulighed for at oprette flerlinjede tekstinput.

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

| Egenskaber  | Type     | Beskrivelse                                                    |
| ----------- | -------- | -------------------------------------------------------------- |
| deaktiveret | boolean  | Angiver, om tekstområdet er deaktiveret                        |
| minRows     | tal      | Minimum antal synlige rækker for tekstområdet. |
| onChange    | funktion | Tilbagekaldsfunktion udløses, når tekstområdeindholdet ændres  |
| pladsholder | streng   | Pladsholdertekst vises, når tekstområdet er tomt               |
| værdi       | streng   | Den aktuelle værdi af tekstområdet                             |

</Tab>
</Tabs>