輸入欄位

可供使用者輸入文字的欄位。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<div class="ts-input">
    <input type="text" placeholder="搜尋關鍵字…">
</div>
狀態
停用的

使輸入欄位呈現無法互動、點擊的模樣。若你希望真正地停用輸入行為,請在該輸入欄位增加 disabled 標籤以符合 HTML 規範。

<div class="ts-input is-disabled">
    <input type="text" placeholder="使用者帳號">
</div>
外觀
實心填充的

帶有實心背景的輸入欄位能更明確地呈現這是可供互動的元素。

<div class="ts-input is-solid">
    <input type="text" placeholder="傳送訊息…">
</div>
底線的

以實心背景和底線明顯呈現一個輸入欄位,讓使用者如填寫表單一樣。

<div class="ts-input is-underlined">
    <input type="text" placeholder="搜尋">
</div>
基本的

僅帶有基本結構而沒有框線或是內距。

<div class="ts-input is-basic is-start-icon">
    <span class="ts-icon is-magnifying-glass-icon"></span>
    <input type="text" placeholder="輸入關鍵字…">
</div>
圓角的

使角落以圓形呈現。

<div class="ts-input is-circular">
    <input type="text" placeholder="搜尋 1,382 位使用者…">
</div>
可調整尺寸的

用於多行輸入欄位可以讓使用者拖曳角落邊緣重新調整輸入欄位的高度。

<div class="ts-input is-resizable">
    <textarea placeholder="回覆此訊息…"></textarea>
</div>
帶標籤的

輸入欄位的開頭或結束位置可以擺放文字標籤,作為前輟或後輟提示。

$
https:// .co
.00
<div class="ts-input is-start-labeled">
    <span class="label">$</span>
    <input type="text">
</div>
<div class="ts-input is-labeled">
    <span class="label">https://</span>
    <input type="text">
    <span class="label">.co</span>
</div>
<div class="ts-input is-end-labeled">
    <input type="text">
    <span class="label">.00</span>
</div>
負面的

表示輸入欄位出錯可能不符合表單驗證規則。

<div class="ts-input is-negative">
    <input type="text" placeholder="電子信箱地址">
</div>
側邊圖示

欄位的左右兩側可以擺放輔助圖示令使用者更加一目瞭然其用途。

<div class="ts-input is-start-icon">
    <span class="ts-icon is-phone-icon"></span>
    <input type="text" placeholder="電話號碼">
</div>
<div class="ts-input is-icon">
    <span class="ts-icon is-phone-icon"></span>
    <input type="text" placeholder="電話號碼">
    <span class="ts-icon is-triangle-exclamation-icon"></span>
</div>
<div class="ts-input is-end-icon">
    <input type="text" placeholder="密碼">
    <span class="ts-icon is-lock-icon"></span>
</div>
尺寸

更改輸入欄位的大小。

<div class="ts-input is-small">
    <input type="text" placeholder="小型輸入欄位">
</div>
<div class="ts-input">
    <input type="text" placeholder="預設輸入欄位">
</div>
<div class="ts-input is-large">
    <input type="text" placeholder="大型輸入欄位">
</div>
較密的

變更元件的內距,令元素之間看起來更密集。

<div class="ts-input is-dense">
    <input type="text" placeholder="使用者名稱">
</div>
種類
顏色選擇器

透過原生的輸入欄位選擇指定的顏色。

<div class="ts-input">
    <input type="color">
</div>
日期與時間

HTML 有提供數種用於時間、日期與週期的輸入欄位。

<div class="ts-input">
    <input type="datetime-local">
</div>
<div class="ts-input">
    <input type="date">
</div>
<div class="ts-input">
    <input type="time">
</div>
<div class="ts-input">
    <input type="month">
</div>
<div class="ts-input">
    <input type="week">
</div>
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標