Controller
複合式輸入匡元件，額外增加輔助訊息用以增強反饋狀態。使用類別名稱為 .ctrl 並以此作為子元件前綴詞。
Prepend
在輸入匡前方添加圖示請使用 .ctrl_prepend 並置於 .ctrl 之內，排在 .input 之後，並且在 .ctrl 上增加類別名稱 .has:prepend。
<div class="ctrl has:prepend">
<input type="text" class="input">
<span class="ctrl_prepend"></span>
</div>
Append
在輸入匡後方添加圖示請使用 .ctrl_append 並置於 .ctrl 之內，排在 .input 之後，並且在 .ctrl 上增加類別名稱 .has:append。
<div class="ctrl has:append">
<input type="text" class="input">
<span class="ctrl_append"></span>
</div>
Both
若要在輸入匡前後方都要添加圖示，請同時加上 .ctrl_prepend 與 .ctrl_append 置於 .ctrl 之內，皆排在 .input 之後，並且在 .ctrl 上增加類別名稱 .has:both。
<div class="ctrl has:both">
<input type="text" class="input">
<span class="ctrl_prepend"></span>
<span class="ctrl_append"></span>
</div>
其實 .ctrl 內的 DOM 排列順序並不影響排版，只是少了些變化而已。XD
<div class="ctrl has:both">
<span class="ctrl_prepend"></span>
<span class="ctrl_append"></span>
<input type="text" class="input">
</div>
但是 .ctrl 上的類別名稱一定要加上 .has:prepend | .has:append | .has:both，否則會視為不顯示。
Status
狀態類別可直接設定於 .ctrl 上。以下是各種類別狀態：
.is:success表示回饋的訊息是成功狀態。.is:warning表示回饋的訊息是警告狀態。.is:danger表示回饋的訊息是危險狀態。
<div class="ctrl has:both is:{status}"></div>
<div class="ctrl has:both" status="{status}"></div>