Option list

Boolean list

A boolean list should only be used for true / false, 0 / 1, yes / no questions

  • The input with value="0" will get the error background color
  • The input with value="1" will get the success background color
<div class="k-optionlist k-optionlist--boolean">
    <div class="k-optionlist__content">
        <input type="radio" name="input-boolean-list" id="input-boolean-list-1" value="1" checked="checked" />
        <label for="input-boolean-list-1">True</label>
        <input type="radio" name="input-boolean-list" id="input-boolean-list-2" value="0" />
        <label for="input-boolean-list-2">False</label>
        <div class="k-optionlist__focus"></div>
    </div>
</div>

Option list

Use when more than two options are available.

<div class="k-optionlist">
    <div class="k-optionlist__content">
        <input type="radio" name="input-option-list" id="input-option-list-1" value="0" checked="checked" />
        <label for="input-option-list-1">Option 1</label>
        <input type="radio" name="input-option-list" id="input-option-list-2" value="1" />
        <label for="input-option-list-2">Crasjustoodio, dapibus ac facilisis in, egestas eget quam.</label>
        <input type="radio" name="input-option-list" id="input-option-list-3" value="2" />
        <label for="input-option-list-3">Option 3</label>
        <div class="k-optionlist__focus"></div>
    </div>
</div>

Block list

<div class="k-optionlist k-optionlist--block">
    <div class="k-optionlist__content">
        <input type="radio" name="input-block-list" id="input-block-list-1" value="1" checked="checked" />
        <label for="input-block-list-1">True</label>
        <input type="radio" name="input-block-list" id="input-block-list-2" value="0" />
        <label for="input-block-list-2">False</label>
        <div class="k-optionlist__focus"></div>
    </div>
</div>

Disabled items

<div class="k-optionlist k-optionlist--block">
    <div class="k-optionlist__content">
        <input type="radio" name="input-disabled-items" id="input-disabled-items-1" value="1" checked="checked" />
        <label for="input-disabled-items-1">True</label>
        <input type="radio" name="input-disabled-items" id="input-disabled-items-2" value="0" />
        <label for="input-disabled-items-2">False</label>
        <input type="radio" name="input-disabled-items" id="input-disabled-items-3" value="0" disabled="disabled" />
        <label for="input-disabled-items-3">False</label>
        <div class="k-optionlist__focus"></div>
    </div>
</div>

Need Help?

Let our developers personally assist you. You can ask development related questions in our Support Center. Only for Business or Agency subscribers.