テキストエリア

ユーザーが複数行のテキストを入力する必要があるフォーム用のUIコンポーネントです。

ラベル
※必須サポートテキスト
＊エラーテキスト

html

<div class="form-group">
    <label for="test" class="form-label">
        ラベル
        <span class="form-necessity">※必須</span>
    </label>
    <div class="form-support">サポートテキスト</div>
    <textarea id="test" class="textarea"></textarea>
    <div class="form-error">＊エラーテキスト</div>
</div>

HTML属性

無効

disabled属性を追加すると入力がグレーアウトされます。

html

<textarea class="textarea" disabled></textarea>

読み取り専用

readonlyを使用すると専用のデザインになります。

html

<textarea class="textarea" readonly></textarea>

検証とフィードバック

ユーザーの入力を検証した後のフィードバックデザイン

エラー

is-errorクラスを追加するだけです。

html

<textarea class="textarea is-error"></textarea>

form-groupを使用するとエラーテキストも同時に表示することが可能です。

ラベル
※必須サポートテキスト
＊エラーテキスト

html

<div class="form-group">
    <label for="test" class="form-label">
        ラベル
        <span class="form-necessity">※必須</span>
    </label>
    <div class="form-support">サポートテキスト</div>
    <textarea id="test" class="textarea is-error"></textarea>
    <div class="form-error">＊エラーテキスト</div>
</div>

文字数カウンター

JavaScriptが必要です。is="au-textarea"でカスタム要素を指定すると文字数カウンターが利用できます。

ラベル
※必須サポートテキスト
＊エラーテキスト

html

<div class="form-group">
    <label for="test" class="form-label">
        ラベル
        <span class="form-necessity">※必須</span>
    </label>
    <div class="form-support">サポートテキスト</div>
    <textarea is="au-textarea" id="test" class="textarea"></textarea>
    <div class="form-error">＊エラーテキスト</div>
</div>