此版本 (4.2) 已經過時,點擊此處檢視最新版本 (5.0)
台灣正體

核取方塊

可供勾選的項目並支援同時批次選取。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<label class="ts-checkbox">
    <input type="checkbox" checked />
    蘋果
</label>
概要

若用於狀態之間的切換(如:是、否)應使用單選方塊元件。核取方塊的重點在於支援多選,甚至是勾選後可以取消勾選。

狀態
停用的

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

<label class="ts-checkbox is-disabled">
    <input type="checkbox" />
    記住我的密碼
</label>
不定的

不定狀態會令其勾選狀態表現地模稜兩可。例如:一個父核取方塊能表示要全選所有項目,但其中有些項目也可能沒有被勾選。

<label class="ts-checkbox is-indeterminate">
    <input type="checkbox" checked />
    所有檔案
</label>
<div class="ts-content is-dense">
    <div class="ts-wrap is-vertical is-compact">
        <label class="ts-checkbox">
            <input type="checkbox" checked />
            影片
        </label>
        <label class="ts-checkbox">
            <input type="checkbox" />
            文件
        </label>
        <label class="ts-checkbox">
            <input type="checkbox" checked />
            音樂
        </label>
    </div>
</div>
外觀
負面的

表示一個核取方塊可能沒有被勾選。

<label class="ts-checkbox is-negative">
    <input type="checkbox" />
    我同意使用者規範。
</label>
單獨的

核取方塊如果沒有任何標籤文字,可以將其指定為單獨的核取方塊,藉此來移除多餘的間距。

<label class="ts-checkbox is-solo">
    <input type="checkbox" />
</label>
尺寸

更改核取方塊的大小。

<label class="ts-checkbox is-small">
    <input type="checkbox" checked />
    小型選項
</label>
<label class="ts-checkbox">
    <input type="checkbox" />
    預設選項
</label>
<label class="ts-checkbox is-large">
    <input type="checkbox" />
    大型選項
</label>
組合應用
鄰近核取方塊

透過間隔容器元件能讓核取方塊以左右、上下排列並保持一定的間距。

持有狀態
寵物屬性
<div class="ts-wrap is-vertical">
    <div class="ts-text is-label">持有狀態</div>
    <div class="ts-wrap">
        <label class="ts-checkbox">
            <input type="checkbox" checked />
            已售出
        </label>
        <label class="ts-checkbox">
            <input type="checkbox" />
            未販售
        </label>
        <label class="ts-checkbox">
            <input type="checkbox" />
            空投限定
        </label>
    </div>
    <div class="ts-text is-label">寵物屬性</div>
    <div class="ts-wrap is-vertical is-compact">
        <label class="ts-checkbox">
            <input type="checkbox" checked />
            火
        </label>
        <label class="ts-checkbox">
            <input type="checkbox" />
            水
        </label>
        <label class="ts-checkbox">
            <input type="checkbox" />
            土
        </label>
    </div>
</div>
在尋找相似的元件嗎?
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標