Textarea

Textareaは、複数行のテキスト入力を取得するために使用されるコンポーネントです。

<Textarea placeholder="Placeholder" />

使い方

import { Textarea } from "@yamada-ui/react"

import { Textarea } from "@/components/ui"

import { Textarea } from "@workspaces/ui"

<Textarea />

バリアントを変更する

<VStack>
  <For each={["outline", "filled", "flushed"]}>
    {(variant) => (
      <Textarea
        key={variant}
        variant={variant}
        placeholder={toTitleCase(variant)}
      />
    )}
  </For>
</VStack>

サイズを変更する

<VStack>
  <For each={["xs", "sm", "md", "lg", "xl"]}>
    {(size) => (
      <Textarea key={size} size={size} placeholder={`Size (${size})`} />
    )}
  </For>
</VStack>

カラースキームを変更する

<VStack>
  <For each={["success", "warning"]}>
    {(colorScheme) => (
      <Textarea
        key={colorScheme}
        colorScheme={colorScheme}
        placeholder={toTitleCase(colorScheme)}
      />
    )}
  </For>
</VStack>

無効にする

無効にする場合は、disabledをtrueに設定します。

<VStack>
  <For each={["outline", "filled", "flushed"]}>
    {(variant) => (
      <Textarea
        key={variant}
        disabled
        variant={variant}
        placeholder={toTitleCase(variant)}
      />
    )}
  </For>
</VStack>

読み取り専用にする

読み取り専用にする場合は、readOnlyをtrueに設定します。

<VStack>
  <For each={["outline", "filled", "flushed"]}>
    {(variant) => (
      <Textarea
        key={variant}
        variant={variant}
        placeholder={toTitleCase(variant)}
        readOnly
      />
    )}
  </For>
</VStack>

無効な入力にする

無効な状態にする場合は、invalidをtrueに設定します。

<VStack>
  <For each={["outline", "filled", "flushed"]}>
    {(variant) => (
      <Textarea
        key={variant}
        variant={variant}
        placeholder={toTitleCase(variant)}
        invalid
      />
    )}
  </For>
</VStack>

ボーダーの色を変更する

ボーダーの色を変更する場合は、focusBorderColorまたはerrorBorderColorに値を設定します。

<VStack>
  <Textarea focusBorderColor="green.500" placeholder="Custom border color" />
  <Textarea
    errorBorderColor="orange.500"
    invalid
    placeholder="Custom border color"
  />
</VStack>

プレースホルダーをカスタマイズする

プレースホルダーの色を変更する場合は、propsに_placeholderを設定します。

<Textarea
  placeholder="Custom placeholder"
  _placeholder={{ color: "green.500" }}
/>

リサイズの動作を変更する

リサイズの動作を変更する場合は、resizeに"block"、"horizontal"、"vertical"、"none"のいずれかを設定します。

<VStack>
  <For each={["block", "horizontal", "vertical", "none"]}>
    {(resize) => (
      <Textarea
        key={resize}
        placeholder={toTitleCase(resize)}
        resize={resize}
      />
    )}
  </For>
</VStack>

自動リサイズを使用する

自動リサイズを有効にする場合は、autosizeをtrueに設定します。

<Textarea autosize placeholder="Autosize" />

リサイズを制御する

const resizeRef = useRef<() => void>(null)
const onResize = () => {
  resizeRef.current?.()
}

return (
  <VStack>
    <Textarea placeholder="Use resize" resizeRef={resizeRef} />
    <Button alignSelf="flex-end" onClick={onResize}>
      Resize
    </Button>
  </VStack>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

Props

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	`"md"`	`"2xl" \| "lg" \| "md" \| "sm" \| "xl" \| "xs"` The size of the component.
`variant`	`"outline"`	`"filled" \| "flushed" \| "outline" \| "plain"` The variant of the component.
`autosize`	-	`boolean` If `true`, the Textarea height auto-adjusts to text height.
`errorBorderColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The border color when the input is invalid.
`focusBorderColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The border color when the input is focused.
`invalid`	`false`	`boolean` If `true`, the field will be invalid.
`maxRows`	`Infinity`	`number` Autosize up to maxRows rows.
`minRows`	`2`	`number` Autosize up to minRows rows.
`resizeRef`	-	`ForwardedRef<() => void>` Ref to a resize function.

アクセシビリティ

Field.Rootを使用しない場合は、Textareaにaria-labelまたはaria-labelledbyを設定します。

<Textarea aria-label="Comments" />

<VStack gap="sm">
  <Text as="h3" id="label">
    Comments
  </Text>

  <Textarea aria-labelledby="label" />
</VStack>

ARIAロールと属性

コンポーネント	ロールと属性	使い方
`Textarea`	`aria-invalid`	`invalid`が設定されている場合は`"true"`を設定します。
	`aria-disabled`	`disabled`が設定されている場合は`"true"`を設定します。
	`aria-describedby`	`Textarea`が`Field.Root`内にあり、`Field.Root`に`errorMessage`または`helperMessage`、もしくは`Field.ErrorMessage`または`Field.HelperMessage`が設定されている場合は、その`id`を設定します。
	`aria-readonly`	`readOnly`が設定されている場合は`"true"`を設定します。
	`aria-required`	`required`が設定されている場合は`"true"`を設定します。

類似のコンポーネント

PinInputは、ピンコードやOTP(ワンタイムパスワード)の入力を取得するために使用されるコンポーネントです。

PasswordInputは、表示・非表示の切り替えができるパスワード入力用のコンポーネントです。

NumberInputは、ユーザーからの数値入力を取得するために使用されるコンポーネントです。

Inputは、ユーザーからのテキスト入力を取得するために使用されるコンポーネントです。

Editableは、インラインで編集可能なテキスト入力を取得するために使用されるコンポーネントです。

FileInputは、ユーザーがファイルを選択するために使用されるコンポーネントです。

Autocompleteは、ユーザーのテキスト入力に応じて候補を表示するために使用されるコンポーネントです。

Switchは、オンとオフの状態を切り替えるために使用されるコンポーネントです。

使用しているコンポーネント・フック

Inputは、ユーザーからのテキスト入力を取得するために使用されるコンポーネントです。

Fieldは、フォーム要素に、ラベル、ヘルパーメッセージ、エラーメッセージなどをグループ化するために使用されるコンポーネントです。