m-input
テキスト入力を即す欄を表示する。要素に直接クラスを付与する(ほとんどの場合、input要素、textarea要素となる)。
余白・レイアウト等は utility > .u-margin
や component > .c-form
で指定する。
.is-error
を同時に使用するとエラーがあったときの表示となる。
<div style="margin-bottom: 2rem;"> <input type="text" class="m-input" size="20" value="吾輩は猫である。" /> <input type="text" class="m-input is-error" size="20" value="* なに? *" /> </div> <div> <textarea class="m-input" rows="5" cols="60">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</textarea> <textarea class="m-input is-error" rows="5" cols="60">* おおっと *</textarea> </div>
m-input-(size)
テキスト入力を即す欄の全体のサイズを変更する。(size)は sm, lg
に対応している。
<div style="margin-bottom: 2rem;"> <input type="text" class="m-input m-input-sm" size="20" value="吾輩は猫である。" /> <input type="text" class="m-input m-input-lg" size="20" value="吾輩は猫である。" /> </div> <div> <textarea class="m-input m-input-sm" rows="5" cols="60">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</textarea> <textarea class="m-input m-input-lg" rows="5" cols="60">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</textarea> </div>