ui:textField

汎用UIコンポーネントのリストです。

Examples

Default

Source Code

<div class="grid gap-4">
  <div class="ui:textField">
    <input type="text" placeholder="Type: text" />
  </div>
  <div class="ui:textField">
    <input type="email" placeholder="Type: email" />
  </div>
  <div class="ui:textField">
    <input type="search" placeholder="Type: search" />
  </div>
  <div class="ui:textField">
    <input type="url" placeholder="Type: url" />
  </div>
  <div class="ui:textField">
    <input type="tel" placeholder="Type: tel" />
  </div>
  <div class="ui:textField">
    <input type="password" placeholder="Type: password" />
  </div>
  <div class="ui:textField">
    <input type="date" placeholder="Type: date" />
  </div>
  <div class="ui:textField">
    <input type="datetime-local" placeholder="Type: date" />
  </div>
</div>

Prefix / Suffix

Source Code

<div class="grid gap-4">
  <div class="ui:textField">
    <div class="ui:textField__prefix">
      <ui-icon data-icon="calendar"></ui-icon>
    </div>
    <input type="text" placeholder="With Prefix Icon" />
  </div>
  <div class="ui:textField">
    <input type="text" placeholder="With Suffix Button" />
    <button class="ui:textField__suffix" type="button" aria-label="検索">
      <ui-icon data-icon="search"></ui-icon>
    </button>
  </div>
  <div class="ui:textField">
    <div class="ui:textField__prefix">https://</div>
    <input type="text" placeholder="With Prefix & Suffix Text" />
    <div class="ui:textField__suffix">.com</div>
  </div>

</div>

Error

Source Code

<div class="ui:textField">
  <input type="text" placeholder="Placeholder Text" data-state="error" />
</div>

Disabled

Source Code

<div class="grid gap-4">
  <div class="ui:textField">
    <input type="text" placeholder="Placeholder Text" disabled />
  </div>
  <div class="ui:textField">
    <div class="ui:textField__prefix">
      <ui-icon data-icon="calendar"></ui-icon>
    </div>
    <input type="text" placeholder="Disabled" disabled />
  </div>
</div>

Readonly

Source Code

<div class="ui:textField">
  <input type="text" value="Readonly Text" placeholder="Placeholder Text" readonly />
</div>

Variants

属性	要素	値	効果
data-state	<input>	error	状態の指定
disabled	<input>	-	無効化の指定
readonly	<input>	-	読み取り専用の指定