@model IEnumerable<string>

<h1>
    ComboBox with Strings
</h1>
<p>
    By default, the ComboBox acts as a regular HTML input element,
    with the additional styling and object model associated with
    all Wijmo controls. The <b>text</b> property gets or sets the
    user's input:
</p>
<label for="theComboNoSrc">Any string:</label>
@Html.C1().ComboBox().Id("theComboNoSrc").ShowDropDownButton(false)
<p>
    You have typed this: <b id="theComboText"></b>.
</p>
<br />

<h4>
    Choosing from Lists
</h4>
<p>
    If you want to provide a list of strings for users to choose
    from, set the <b>itemsSource</b> property to an array containing
    those items and users will be able to select one of them:
</p>
<label for="theCombo">Select a Country:</label>
@Html.C1().ComboBox().Id("theCombo").Bind(Model)
<p>
    You have selected this country: <b id="theComboValue"></b>.
</p>
<br />

<h4>
    Simple Customizations
</h4>
<p>
    By default, the ComboBox will force users to select one of the
    items on the list. Users will not be able to leave the combo
    empty or to enter values that are not on the list.
</p>
<p>
    You can change these behaviors by setting the <b>isRequired</b>
    and <b>isEditable</b> properties:
</p>
<p>
    <label>
        <input id="isRequired" type="checkbox">
        isRequired
    </label>
</p>
<p>
    <label>
        <input id="isEditable" type="checkbox" checked="checked">
        isEditable
    </label>
</p>
<label for="theComboCustom">Select a Country:</label>
@Html.C1().ComboBox().Id("theComboCustom").Bind(Model).IsRequired(false).IsEditable(true).Placeholder("No Country Selected")
<p>
    You have selected this country: <b id="theComboCustomValue"></b>.
</p>