> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Text

<Frame>
  <img src="https://mintcdn.com/twenty/GMeQVDsw5ST_LXpE/images/user-guide/notes/notes_header.png?fit=max&auto=format&n=GMeQVDsw5ST_LXpE&q=85&s=2cd2809ffc00b2d3d653891a92544d1a" alt="Header" width="1440" height="680" data-path="images/user-guide/notes/notes_header.png" />
</Frame>

## Text Input

Allows users to enter and edit text.

<Tabs>
  <Tab title="Usage">
    ```jsx theme={null}
    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 (
        <TextInput
          className
          label="Username"
          onChange={handleChange}
          fullWidth={false}
          disableHotkeys={false}
          error="Invalid username"
          onKeyDown={handleKeyDown}
          RightIcon={null}
        />
      );
    };

    ```
  </Tab>

  <Tab title="Props">
    | Props          | Type          | Description                                                                                                            |
    | -------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------- |
    | className      | string        | Optional name for additional styling                                                                                   |
    | label          | string        | Represents the label for the input                                                                                     |
    | onChange       | function      | The function called when the input value changes                                                                       |
    | fullWidth      | boolean       | Indicates whether the input should take up 100% of the width                                                           |
    | disableHotkeys | boolean       | Indicates whether hotkeys are enabled for the input                                                                    |
    | error          | string        | Represents the error message to be displayed. When provided, it also adds an icon error on the right side of the input |
    | onKeyDown      | function      | Called when a key is pressed down while the input field is focused. Receives a `React.KeyboardEvent` as an argument    |
    | RightIcon      | IconComponent | An optional icon component displayed on the right side of the input                                                    |

    The component also accepts other HTML input element props.
  </Tab>
</Tabs>

## Autosize Text Input

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

<Tabs>
  <Tab title="Usage">
    ```jsx theme={null}
    import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";

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

  <Tab title="Props">
    | Props       | Type     | Description                                                                 |
    | ----------- | -------- | --------------------------------------------------------------------------- |
    | onValidate  | function | The callback function you want to trigger when the user validates the input |
    | minRows     | number   | The minimum number of rows for the text area                                |
    | placeholder | string   | The placeholder text you want to display when the text area is empty        |
    | onFocus     | function | The callback function you want to trigger when the text area gains focus    |
    | variant     | string   | The variant of the input. Options include: `default`, `icon`, and `button`  |
    | buttonTitle | string   | The title for the button (only applicable for the button variant)           |
    | value       | string   | The initial value for the text area                                         |
  </Tab>
</Tabs>

## Text Area

Allows you to create multi-line text inputs.

<Tabs>
  <Tab title="Usage">
    ```jsx theme={null}
    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">
    | Props       | Type     | Description                                                    |
    | ----------- | -------- | -------------------------------------------------------------- |
    | disabled    | boolean  | Indicates whether the text area is disabled                    |
    | minRows     | number   | Minimum number of visible rows for the text area.              |
    | onChange    | function | Callback function triggered when the text area content changes |
    | placeholder | string   | Placeholder text displayed when the text area is empty         |
    | value       | string   | The current value of the text area                             |
  </Tab>
</Tabs>