＊このドキュメントは編集中です

Dictionary

Element

AContainer

テキストフィールドのかたちをつくる要素です。この要素の大きさが、テキストフィールドをタップ/クリックできる範囲です。

BInput text / Placeholder text

Input textは、ユーザーがテキストフィールドに入力したテキストです。Input textの内容が空の場合は表示しないか、HTMLのinput要素のplaceholder属性に指定したテキストを表示し、これをPlaceholder textと呼びます。Input textとPlaceholder textは同じ要素ですが、状態によって名前が変わります。

Placeholder textを表示する場合は、Input textと区別するために、配色の明度を下げます。Placeholder textはユーザーが入力をはじめると見えなくなるため、ユーザーへ入力例などを提示する機能に留めて、テキストフィールドの説明はなるべくFormコンポーネントが提供するLabelやDescriptionを使用します。ただし、キーワード検索やログインフォームなど、アイコンで意味を補完できる場合や、慣習的に理解できると判断した場合は、Placeholder textにLabelと同等の機能を持たせてもかまいません。その場合は、アクセシビリティを担保するためにHTMLにlabel要素をマークアップすることを忘れないでください。

CLeading icon (optional)

テキストフィールドのアイコンです。テキストフィールドが提供している機能の意味を伝わりやすくするために、情報を補完する機能を持ちます。Input text / Placeholder textの左のみに配置し、右には配置しません。

Appearance

Textfieldの見た目を指定できます。

	Modifier class
Outlined*	.-appearance-outlined
Filled	.-appearance-filled

Color

Semantic Colorを指定して配色できます。

	Modifier class	Pepper flavor
Neutral*	.-color-neutral	Pepper Gray
Negative	.-color-negative	Pepper Red

Size

どのくらいの大きさで表示するか指定できます。

	Modifier class
S	.-size-s
M*	.-size-m
L	.-size-l

Width

親要素の幅に対してどのくらいの幅で表示するか指定できます。

	Modifier class
Auto*	.-width-auto
Full	.-width-full
Half	.-width-half
Third	.-width-third

Mixin-based

HTML

<div class="textfield-component">
  <input class="_input" type="text" value="" placeholder="渋谷区桜丘町" />
</div>

SCSS

@use '@pepabo-inhouse/components-web' as inhouse;

.textfield-component {
  @include inhouse.textfield-style(
    $options: (
      appearance: outlined,
      color: neutral,
      size: m,
      width: auto,
    )
  );
}

Class-based

HTML

<div class="in-textfield -appearance-outlined -color-neutral -size-m -width-auto">
  <input class="_input" type="text" value="" placeholder="渋谷区桜丘町" />
</div>

SCSS

@use '@pepabo-inhouse/components-web' as inhouse;

@include inhouse.textfield-export;