テキスト入力

テキストインプット（1行入力）

1行での文字列を入力するテキストインプットのコンポーネントにはsu-form-text-inputのクラス名を付与します。

span要素などを用いてマークアップし、その子要素にinput要素を含めるようにします。上記クラス名を付与することでスタイルが適用されます。フォームの入力項目として境界線や内余白などが適切に調整されます。

メールアドレスやURLなどを含むフォームの文字列入力に使用するインプット要素です。入力できることがわかりやすく伝わるようにスタイリングされます。コンポーネントのデザインは統一性を持たせるため、インプットの種類に関わらず同じデザインになるよう調整されています。

※このコンポーネントは初期状態で日付選択のデイトピッカーや数値入力のスピナーボタンなどのUI要素が非表示となります。

<!-- テキスト入力 -->
<span class="su-form-text-input">
  <input type="text" placeholder="テキスト" aria-label="テキスト入力欄">
</span>

<!-- メールアドレス入力 -->
<span class="su-form-text-input">
  <input type="email" placeholder="info@example.com" autocomplete="email" aria-label="メールアドレス入力欄">
</span>

<!-- 電話番号入力 -->
<span class="su-form-text-input">
  <input type="tel" placeholder="090-1234-5678" autocomplete="tel" aria-label="電話番号入力欄">
</span>

<!-- URL入力 -->
<span class="su-form-text-input">
  <input type="url" placeholder="https://example.com" autocomplete="url" aria-label="URL入力欄">
</span>

<!-- 数値入力 -->
<span class="su-form-text-input">
  <input type="number" placeholder="1234" aria-label="数値入力欄">
</span>

<!-- 日付入力 -->
<span class="su-form-text-input">
  <input type="date" aria-label="日付入力欄">
</span>

<!-- 時刻入力 -->
<span class="su-form-text-input">
  <input type="time" aria-label="時刻入力欄">
</span>

<!-- パスワード入力 -->
<span class="su-form-text-input">
  <input type="password" aria-label="パスワード入力欄">
</span>

テキストインプットのボーダーや背景色、角丸サイズ、また、プレースホルダーテキストの文字色はCSS変数を使って変更することが可能です。

.su-form-text-input {
  --su-color-border-text-input: red;
  --su-color-text-text-input: lime;
  --su-color-placeholder-text-input: yellow;
  --su-size-radius-text-input: 10px;
}

デイトピッカー、スピナーボタンUIの表示

テキストインプットのコンポーネントはデフォルトで日付入力のデイトピッカーや数値入力のスピナーボタンのUI要素が非表示となりますが、su-form-text-input-show-uiのクラスを追加することで、ブラウザデフォルトのUI要素を表示します。

<!-- デフォルトで日付入力のデイトピッカーUI要素を表示 -->
<span class="su-form-text-input su-form-text-input-show-ui">
  <input type="date" aria-label="日付入力欄">
</span>

アイコンの表示

テキストインプットのコンポーネントはsu-form-text-input-add-icon-[ICON_TYPE]クラスを追加することで、インプット入力値の前に対応したアイコンを表示させることができます。アイコンタイプはemail、tel、url、date、time、passwordのいずれかをサフィックスとすることでアイコンタイプに対応したアイコンが表示されます。

デフォルトでは入力タイプに関わらず統一されたデザインになっているため、入力タイプに対応したアイコンを表示させることで、ユーザビリティの向上に期待できます。

<!-- emailのアイコン表示 -->
<span class="su-form-text-input su-form-text-input-add-icon-email">
  <input type="email" placeholder="info@example.com" autocomplete="email" aria-label="メールアドレス入力欄">
</span>

<!-- telのアイコン表示 -->
<span class="su-form-text-input su-form-text-input-add-icon-tel">
  <input type="tel" placeholder="090-1234-5678" autocomplete="tel" aria-label="電話番号入力欄">
</span>

<!-- urlのアイコン表示 -->
<span class="su-form-text-input su-form-text-input-add-icon-url">
  <input type="url" placeholder="https://example.com" autocomplete="url" aria-label="URL入力欄">
</span>

<!-- dateのアイコン表示 -->
<span class="su-form-text-input su-form-text-input-add-icon-date">
  <input type="date" aria-label="日付入力欄">
</span>

<!-- timeのアイコン表示 -->
<span class="su-form-text-input su-form-text-input-add-icon-time">
  <input type="time" aria-label="時刻入力欄">
</span>

<!-- passwordのアイコン表示 -->
<span class="su-form-text-input su-form-text-input-add-icon-password">
  <input type="password" aria-label="パスワード入力欄">
</span>

アイコンの色はCSS変数を使って変更することが可能です。

.su-form-text-input-add-icon-email::before {
  --su-color-icon-text-input: red;
}

テキストエリア（複数行入力）

複数行での文字列を入力するテキストエリアのコンポーネントにはsu-form-text-areaのクラス名を付与します。

textarea要素を用いてマークアップします、1行入力のテキストインプットのコンポーネントとは異なり、別の要素でラッピングする必要はありません。上記クラス名を付与することでスタイルが適用されます。フォームの入力項目として境界線や内余白などが適切に調整されます。

複数行にわたるフォームの文字列入力に使用するインプット要素です。入力できることがわかりやすく伝わるようにスタイリングされます。コンポーネントのデザインは統一性を持たせるため、1行入力のテキストインプットと同じデザインになるよう調整されています。

複数行入力のテキストエリアコンポーネントは、（一部のブラウザを除き）デフォルトで要素の幅は入力内容に対応して伸縮し、高さも入力内容に応じて、上限と下限の間で伸縮するようになっています。さまざまなレイアウトにおいてより柔軟に配置することができます。

<textarea class="su-form-text-area" placeholder="テキスト入力（複数行）" aria-label="複数行テキスト入力欄"></textarea>

.su-form-text-area {
  --su-color-border-text-input: red;
  --su-color-text-text-input: lime;
  --su-color-placeholder-text-input: yellow;
  --su-size-radius-text-input: 20px;
  --su-min-row-text-area: 2;
  --su-max-row-text-area: 10;
}