> ## 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.

# テキスト

<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="ヘッダー" width="1440" height="680" data-path="images/user-guide/notes/notes_header.png" />
</Frame>

## テキスト入力

ユーザーがテキストを入力および編集できるようにします。

<Tabs>
  <Tab title="使用方法">
    ```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="プロパティ">
    | プロパティ          | タイプ         | 説明                                                                                                                          |
    | -------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------- |
    | className      | string      | 追加スタイル用のオプション名                                                                                                              |
    | ラベル            | string      | 入力のラベルを表します。                                                                                                                |
    | onChange       | function    | 入力値が変わるときに呼び出される関数                                                                                                          |
    | fullWidth      | ブール型        | 入力が幅の100%を占めるかどうかを示します                                                                                                      |
    | disableHotkeys | ブール型        | 入力でホットキーが有効になっているかどうかを示します                                                                                                  |
    | エラー            | string      | 表示されるエラーメッセージを表します。 指定された場合、入力の右側にアイコンエラーも追加されます。                                                                           |
    | onKeyDown      | 機能          | 入力フィールドにフォーカスがあるときにキーが押されたときに呼び出されます。 入力フィールドにフォーカスがあるときにキーが押されたときに呼び出されます。 Receives a `React.KeyboardEvent` as an argument |
    | 右アイコン          | アイコンコンポーネント | 入力の右側に表示されるオプションのアイコンコンポーネント                                                                                                |

    コンポーネントは、他の HTML 入力要素のプロパティも受け入れます。
  </Tab>
</Tabs>

## オートサイズテキスト入力

コンテンツに基づいて高さを自動調整するテキスト入力コンポーネント。

<Tabs>
  <Tab title="使用方法">
    ```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="プロパティ">
    | プロパティ      | タイプ    | 説明                                                         |
    | ---------- | ------ | ---------------------------------------------------------- |
    | onValidate | 機能     | ユーザーが入力を検証するときにトリガーされるコールバック関数                             |
    | 最小行数       | 数      | テキスト領域の最小行数                                                |
    | プレースホルダー   | string | テキストエリアが空の場合に表示するプレースホルダー テキスト                             |
    | onFocus    | 機能     | テキストエリアにフォーカスが当たったときにトリガーされるコールバック関数                       |
    | バリアント      | string | 入力のバリエーション。 オプションには `default`、 `icon`、および `button` が含まれます。 |
    | ボタンタイトル    | string | ボタンのタイトル（ボタンのバリアントの場合のみ適用可能）                               |
    | 値          | string | テキストエリアの初期値                                                |
  </Tab>
</Tabs>

## テキストエリア

複数行のテキスト入力を作成できます。

<Tabs>
  <Tab title="使用方法">
    ```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="プロパティ">
    | プロパティ    | タイプ    | 説明                                 |
    | -------- | ------ | ---------------------------------- |
    | 無効       | ブール型   | テキストエリアが無効かどうかを示します                |
    | 最小行数     | 数      | テキストエリアの最小可視行数。                    |
    | onChange | 機能     | テキストエリアの内容が変更されたときにトリガーされるコールバック関数 |
    | プレースホルダー | string | テキストエリアが空のときに表示されるプレースホルダーテキスト     |
    | 値        | string | テキストエリアの現在の値                       |
  </Tab>
</Tabs>