VTextarea API

Receive special perks and help support Vuetify development by sponsoring on GitHub.

Props

name	type	default
`active`	boolean	false
アイテムの active 状態を制御します。これは通常、コンポーネントをハイライトするために使用されます。
`append-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	undefined
デフォルトコンテンツの後の append スロットに v-iconコンポーネントを作成します。
`append-inner-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	undefined
append-inner スロットに v-iconコンポーネントを作成します。
`autofocus`	boolean	false
MISSING DESCRIPTION (edit in github)
`auto-grow`	boolean	false
テキストの量に応じてテキストエリアを自動的に拡大します。
`base-color`	string	undefined
フォーカスされていないときの入力の色を設定します。
`bg-color`	string	undefined
指定された色をコントロールの背景に適用します。color prop をサポートするコンポーネントに使用されます。- ユーティリティカラー (例: `success` や `purple`) またはCSSカラー (`#033` や `rgba(255, 0, 0, 0.5)`) に対応します。組み込みクラスのリストはカラーページで確認できます。
`center-affix`	boolean	undefined
Vertically align appendInner, prependInner, clearIcon and label in the center.
`clearable`	boolean	false
コンポーネントをクリアすることができます。
`clear-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$clear'
clearable prop が true に設定されているときに使用されるアイコンです。
`color`	string	undefined
指定された色をコントロールに適用します。ユーティリティカラー (例えば `success` や `purple`) またはCSSカラー (`#033` や `rgba(255, 0, 0, 0.5)`) に対応しています。組み込みクラスのリストはカラーページで確認できます。
`counter`	string \| number \| true	false
入力長のカウンタを作成します。数値が指定されていない場合、デフォルトは 25 になります。バリデーションは適用しません。
`counter-value`	(value: any) => number	undefined
入力の長さを表示しますが、検証は行いません。
`density`	'default' \| 'comfortable' \| 'compact'	'default'
コンポーネントが使用する垂直方向の高さを調整します。
`direction`	'horizontal' \| 'vertical'	'horizontal'
入力の方向を変更します。
`dirty`	boolean	false
手動でダーティ状態のスタイリングを適用します。
`disabled`	boolean	null
入力をクリックまたはターゲットする機能を削除します。
`error`	boolean	false
入力を手動でエラー状態にします。
`error-messages`	string \| string[]	[]
入力をエラー状態にし、カスタムエラーメッセージを通過させます。これは rules prop から発生するすべての検証と組み合わされます。このフィールドは検証をトリガーしません。
`flat`	boolean	false
エレベーションがあるバリアントを使用しているときは、ボックスシャドウを削除します。
`focused`	boolean	false
コンポーネントにフォーカス状態のスタイルを強制します。
`hide-details`	boolean \| 'auto'	false
ヒントやバリデーションエラーを非表示にします。 `auto` が設定されている場合、表示するメッセージ (ヒント、エラーメッセージ、カウンター値など) がある場合のみ表示します。
`hide-spin-buttons`	boolean	false
型が `number` に設定されている場合、入力のスピンボタンを非表示にします。
`hint`	string	undefined
フォーカスされると入力欄の下にヒントテキストを表示します。persistent-hint プロパティを使用して常に開いた状態にすることができます。
`id`	string	undefined
コンポーネントにDOM idを設定します。
`label`	string	undefined
v-labelまたは v-field-labelコンポーネントのテキストを設定します。
`loading`	string \| boolean	false
線形プログレスバーを表示します。プログレスバーに適用する色を指定する文字列 (任意のマテリアルカラーやテーマカラー - primary、secondary、success、info、warning、error) 、またはコンポーネントの color (color propで設定 - コンポーネントでサポートされている場合) かプライマリーカラーを使用するBooleanを指定できます。
`max-errors`	string \| number	1
検証で表示されるエラーの最大数を制御します。
`max-rows`	string \| number	undefined
最大行数を指定します。
`max-width`	string \| number	undefined
コンテンツの横幅の最大値を設定します。
`messages`	string \| string[]	[]
メッセージのリストを表示します。文字列を使用している場合は単一のメッセージを表示します。
`min-width`	string \| number	undefined
コンテンツの横幅の最小値を設定します。
`model-modifiers`	unknown	undefined
内部でのみ使用
`model-value`	any	undefined
コンポーネントの v-model の値です。コンポーネントが multiple prop をサポートしている場合、デフォルトでは空の配列になります。
`name`	string	undefined
コンポーネントのname属性を設定します。
`no-resize`	boolean	false
サイズ変更ハンドルを削除します。
`persistent-clear`	boolean	false
入力がダーティ状態のときは、常にクリア可能なアイコンを表示します (デフォルトではホバー時のみ表示されます)。
`persistent-counter`	boolean	false
カウンターを常に表示するように強制します。
`persistent-hint`	boolean	false
hint を常に表示します。
`persistent-placeholder`	boolean	false
プレースホルダーを常に表示するよう強制します。
`placeholder`	string	undefined
プレースホルダーを設定します。
`prefix`	string	undefined
プレフィックステキストを表示します。
`prepend-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	undefined
コンポーネントの先頭にアイコンが追加されます。`v-icon` と同じ構文を使用します。
`prepend-inner-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	undefined
prepend-inner スロットに v-iconコンポーネントを作成します。
`readonly`	boolean	null
読み取り専用状態に設定します。
`reverse`	boolean	false
向きを反転します。
`rounded`	string \| number \| boolean	undefined
コンポーネントに適用される border-radius を指定します。これには 0、xs、sm、true、lg、xl、pill、circle、shaped があります。利用可能な border radius クラスについての詳細は、Border Radius ページで確認できます。
`rows`	string \| number	5
デフォルトの行数。
`rules`	ValidationRule[]	[]
`function`、`boolean`、`string` のタイプが混在した配列を受け入れます。関数は引数として入力値を受け取り、`true` / `false` またはエラーメッセージを含む `string` を返す必要があります。関数が `false` を返すか、配列内の任意の値が `string` である場合、入力フィールドはエラー状態になります。
`single-line`	boolean	false
フォーカス時やダーティ状態でもラベルが動かないようにします。
`suffix`	string	undefined
サフィックステキストを表示します。
`theme`	string	undefined
このコンポーネントとその全ての子要素のテーマを指定します。
`tile`	boolean	false
適用している border-radius をコンポーネントから削除します。
`validate-on`	\| 'blur' \| 'input' \| 'submit' \| 'invalid-input' \| 'blur lazy' \| 'input lazy' \| 'submit lazy' \| 'invalid-input lazy' \| 'blur eager' \| 'input eager' \| 'submit eager' \| 'invalid-input eager' \| 'lazy blur' \| 'lazy input' \| 'lazy submit' \| 'lazy invalid-input' \| 'eager blur' \| 'eager input' \| 'eager submit' \| 'eager invalid-input' \| 'lazy' \| 'eager'	undefined
検証を実行するためにトリガーするイベントの種類を変更します。
`validation-value`	any	undefined
バリデーションルールの適用時に使用される値です。
`variant`	\| 'underlined' \| 'outlined' \| 'filled' \| 'solo' \| 'solo-inverted' \| 'solo-filled' \| 'plain'	'filled'
コンポーネントに個別のスタイルを適用します。
`width`	string \| number	undefined
コンポーネントに横幅を設定します。

イベント

name	type
`click:append`	[MouseEvent]
追加アイコンがクリックされたときに発生します。
`click:appendInner`	[MouseEvent]
アペンドインナーアイコンがクリックされたときに発生します。
`click:clear`	[MouseEvent]
クリアアイコンをクリックしたときに発生します。
`click:control`	[MouseEvent]
メイン入力がクリックされたときに発生します。
`click:prepend`	[MouseEvent]
プリペンドアイコンがクリックされたときに発生します。
`click:prependInner`	[MouseEvent]
プリペンドインナーアイコンがクリックされたときに発生します。
`mousedown:control`	[MouseEvent]
メインコントロールエリアでマウスダウンを使用したときに発生するイベント。
`update:focused`	[boolean]
入力がフォーカスされたり、フォーカスが外れたりしたときに発生します。
`update:modelValue`	[string]
コンポーネントのモデルが変更されたときに発生するイベント。

Slots

{ id: ComputedRef<string> messagesId: ComputedRef<string> isDirty: ComputedRef<boolean> isDisabled: ComputedRef<boolean> isReadonly: ComputedRef<boolean> isPristine: Ref<boolean> isValid: ComputedRef<boolean | null> isValidating: Ref<boolean> reset: () => void resetValidation: () => void validate: () => void }

{ isActive: Ref<boolean> isFocused: Ref<boolean> controlRef: Ref<HTMLElement | undefined> focus: () => void blur: () => void }

{ isActive: Ref<boolean> isFocused: Ref<boolean> controlRef: Ref<HTMLElement | undefined> focus: () => void blur: () => void } & { props: Record<string, any> }

{ counter: string; max: string | number; value: string | number }

{ id: ComputedRef<string> messagesId: ComputedRef<string> isDirty: ComputedRef<boolean> isDisabled: ComputedRef<boolean> isReadonly: ComputedRef<boolean> isPristine: Ref<boolean> isValid: ComputedRef<boolean | null> isValidating: Ref<boolean> reset: () => void resetValidation: () => void validate: () => void }

{ isActive: Ref<boolean> isFocused: Ref<boolean> controlRef: Ref<HTMLElement | undefined> focus: () => void blur: () => void } & { label: string; props: Record<string, any> }

{ color: string; isActive: boolean }

{ message: string }

{ id: ComputedRef<string> messagesId: ComputedRef<string> isDirty: ComputedRef<boolean> isDisabled: ComputedRef<boolean> isReadonly: ComputedRef<boolean> isPristine: Ref<boolean> isValid: ComputedRef<boolean | null> isValidating: Ref<boolean> reset: () => void resetValidation: () => void validate: () => void }

{ isActive: Ref<boolean> isFocused: Ref<boolean> controlRef: Ref<HTMLElement | undefined> focus: () => void blur: () => void }

`append`
入力の内側で入力内容の後にアイテムを追加します.
`append-inner`
入力内容の中にアイテムを追加します。
`clear`
カスタムクリアアイコンのスロットです (clearable prop が true のときに表示されます)。
`counter`
入力のカウンターテキストのスロット。
`details`
messages の表示を変更するためのカスタム入力詳細用のスロットです。
`label`
v-labelまたは v-field-labelコンポーネントのデフォルトスロットです。
`loader`
カスタムローダーのスロット (loading prop が true のときに表示されます)。
`message`
メッセージの内容をカスタマイズするためのスロットです。
`prepend`
入力の外側で入力内容の前にアイテムを追加します。
`prepend-inner`
入力の前に追加されるスロットです。

公開済み

string[]

boolean

() => Promise<void>

(silent: boolean) => Promise<string[]>

`errorMessages`
MISSING DESCRIPTION (edit in github)
`isValid`
MISSING DESCRIPTION (edit in github)
`reset`
入力値をリセットします。
`resetValidation`
値を変更せずに入力のバリデーションをリセットします。
`validate`
入力の値を検証します。

SASS変数

name	default
`$textarea-box-enclosed-prefix-margin-top`	24px
`$textarea-box-enclosed-single-outlined-label-top`	18px
`$textarea-box-enclosed-single-outlined-margin-top`	10px
`$textarea-dense-append-prepend-margin-top`	8px
`$textarea-dense-box-enclosed-single-outlined-margin-top`	6px
`$textarea-enclosed-text-slot-margin`	-12px
`$textarea-enclosed-text-slot-padding`	12px
`$textarea-prefix-padding-top`	2px
`$textarea-solo-append-padding`	12px
`$textarea-solo-append-prepend-margin-top`	12px

#VTextarea API

VTextarea API