選項按鈕

在多個選項中僅可單選作為答案的項目。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<label class="ts-radio">
    <input name="eat" type="radio" checked />
    早餐
</label>
狀態
停用的

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

<label class="ts-radio is-disabled">
    <input name="linux" type="radio" />
    Arch Linux
</label>
外觀
負面的

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

<label class="ts-radio is-negative">
    <input name="love" type="radio" />
    愛情摩天輪
</label>
尺寸

更改選項按鈕的大小。

<label class="ts-radio is-small">
    <input name="size" type="radio" checked />
    小型選項
</label>
<label class="ts-radio">
    <input name="size" type="radio" />
    預設選項
</label>
<label class="ts-radio is-large">
    <input name="size" type="radio" />
    大型選項
</label>
組合應用
鄰近選項按鈕

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

性別
來電狀態
<div class="ts-wrap is-vertical">
    <div class="ts-text is-label">性別</div>
    <div class="ts-wrap">
        <label class="ts-radio">
            <input name="gender" type="radio" checked />
            男性
        </label>
        <label class="ts-radio">
            <input name="gender" type="radio" />
            女性
        </label>
        <label class="ts-radio">
            <input name="gender" type="radio" />
            其它
        </label>
    </div>
    <div class="ts-text is-label">來電狀態</div>
    <div class="ts-wrap is-vertical is-compact">
        <label class="ts-radio">
            <input name="ring" type="radio" checked />
            響鈴
        </label>
        <label class="ts-radio">
            <input name="ring" type="radio" />
            震動
        </label>
        <label class="ts-radio">
            <input name="ring" type="radio" />
            靜音
        </label>
    </div>
</div>
在尋找相似的元件嗎?
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標