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

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

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

## Textinmatning

Låter användare ange och redigera 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">

| Egenskaper     | Typ           | Beskrivning                                                                                                                                           |
| -------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| className      | string        | Valfritt namn för ytterligare styling                                                                                                                 |
| etikett        | string        | Representerar etiketten för inmatningen                                                                                                               |
| vidÄndring     | funktion      | Funktionen som anropas när inmatningsvärdet ändras                                                                                                    |
| fullWidth      | boolean       | Indikerar om inmatningen ska ta upp 100% av bredden                                                                                                   |
| disableHotkeys | boolean       | Indikerar om snabbkommandon är aktiverade för inmatningen                                                                                             |
| fel            | string        | Representerar felmeddelandet som ska visas. När det tillhandahålls, läggs det också till en ikon för fel på höger sida av inmatningen |
| onKeyDown      | funktion      | Anropas när en tangent trycks ner medan inmatningsfältet är i fokus. Tar emot ett `React.KeyboardEvent` som ett argument              |
| HögerIkon      | IconComponent | En valfri ikonkomponent som visas på höger sida av inmatningen                                                                                        |

Komponenten accepterar också andra HTML inmatningselement egenskaper.

</Tab>

</Tabs>

## Autosize Textinmatning

Textinmatningskomponent som automatiskt justerar sin höjd baserat på innehållet.

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

| Egenskaper   | Typ      | Beskrivning                                                                                                       |
| ------------ | -------- | ----------------------------------------------------------------------------------------------------------------- |
| påValidera   | funktion | Funktionen som du vill utlösa när användaren validerar inmatningen                                                |
| minRader     | nummer   | Det minsta antalet rader för textområdet                                                                          |
| platshållare | string   | Platshållartexten du vill visa när textområdet är tomt                                                            |
| påFokus      | funktion | Funktionen du vill utlösa när textområdet får fokus                                                               |
| variant      | string   | Varianten av inmatningen. Alternativen inkluderar: `standard`, `ikon` och `knapp` |
| knappTitel   | string   | Titeln på knappen (endast tillämplig för variant av typen knapp)                               |
| värde        | string   | Startvärdet för textområdet                                                                                       |

</Tab>

</Tabs>

## Textområde

Låter dig skapa textinmatningar med flera rader.

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

| Egenskaper   | Typ      | Beskrivning                                                    |
| ------------ | -------- | -------------------------------------------------------------- |
| inaktiverad  | boolean  | Indikerar om textområdet är inaktiverat                        |
| minRader     | nummer   | Minsta antalet synliga rader för textområdet.  |
| vidÄndring   | funktion | Callback function triggered when the text area content changes |
| platshållare | string   | Platshållartexten du vill visa när textområdet är tomt         |
| värde        | string   | Det aktuella värdet i textområdet                              |

</Tab>
</Tabs>