Textarea

インポート

import { Textarea } from '@caroainc/ui-components'

個別サブパス（バンドルサイズを抑えたい場合）:

import { Textarea } from '@caroainc/ui-components/textarea'

基本的な使い方

<Textarea placeholder="メッセージを入力..." />

バリアント

default

filled

ghost

underline

<Textarea variant="default" placeholder="Default" />
<Textarea variant="filled" placeholder="Filled" />
<Textarea variant="ghost" placeholder="Ghost" />
<Textarea variant="underline" placeholder="Underline" />

Labelと組み合わせ

メッセージ

<Label htmlFor="message">メッセージ</Label>
<Textarea id="message" placeholder="お問い合わせ内容を入力してください" />

無効状態

<Textarea disabled placeholder="入力不可" />

行数指定

<Textarea rows={2} placeholder="2行" />
<Textarea rows={5} placeholder="5行" />

Props

Prop	Type	Default	Description
`variant`	`'default' \| 'filled' \| 'ghost' \| 'underline'`	`'default'`	スタイルバリアント
`placeholder`	`string`	`-`	プレースホルダーテキスト
`rows`	`number`	`2`	表示行数。ブラウザのネイティブデフォルト値（コンポーネント側では指定していない）
`disabled`	`boolean`	`false`	無効状態
`aria-invalid`	`boolean`	`-`	エラー状態（trueで赤枠のborder/ringが自動適用される。ネイティブ属性）

Textarea

インポート

基本的な使い方

バリアント

Labelと組み合わせ

無効状態

行数指定

Props

On this page