@paperbits/forms/text-input/ko/textInputEditor.html

Paperbits components for form builder.

<div class="form-group">
    <label class="form-label">
        Label
        <button class="btn btn-info" role="tooltip" data-bind="tooltip: 'Input label'"></button>
    </label>
    <input type="text" class="form-control" placeholder="e.g. First name" data-bind="textInput: label"
        maxlength="256" />
</div>

<div class="form-group">
    <label class="form-label">
        Field name
        <button class="btn btn-info" role="tooltip" data-bind="tooltip: 'Field name'"></button>
    </label>
    <input type="text" class="form-control" placeholder="e.g. firstName" data-bind="textInput: name" maxlength="256" />
</div>

<div class="form-group">
    <label class="form-label">
        Initial value
        <button class="btn btn-info" role="tooltip" data-bind="tooltip: 'Initial value'"></button>
    </label>
    <input type="text" class="form-control" placeholder="e.g. 100" data-bind="textInput: value" />
</div>

<div class="form-group">
    <label class="form-label">
        Placeholder
        <button class="btn btn-info" role="tooltip" data-bind="tooltip: 'Placeholder'"></button>
    </label>
    <input type="text" class="form-control" placeholder="e.g. First name" data-bind="textInput: placeholder"
        maxlength="256" />
</div>

<div class="form-group">
    <label class="form-label">
        Limit max length to
        <button class="btn btn-info" role="tooltip" data-bind="tooltip: 'Limit max length to'"></button>
    </label>
    <input type="number" min="0" placeholder="Unlimited" class="form-control" data-bind="value: maxLength" />
</div>

<div class="form-group">
    <label class="form-label">
        <input name="required" type="checkbox" data-bind="checked: required" />Make required
    </label>
</div>

<div class="form-group">
    <label class="form-label">
        <input name="required" type="checkbox" data-bind="checked: readonly" />Make readonly
    </label>
</div>

<div class="form-group">
    <label class="form-label">
        Invalid value message
        <button class="btn btn-info" role="tooltip" data-bind="tooltip: 'Message shown when the input is invalid state'"></button>
    </label>
    <input type="text" class="form-control" placeholder="e.g. Invalid value" data-bind="textInput: invalidFeedback"
        maxlength="250" />
</div>

<div class="form-group">
    <label for="appearanceStyle" class="form-label">
        Appearance
        <button class="btn btn-info" role="tooltip"
            data-bind="tooltip: 'Predefined appearance from style guide.'"></button>
    </label>
    <select id="appearanceStyle" class="form-control"
        data-bind="options: appearanceStyles, value: appearanceStyle, optionsText: 'displayName', optionsValue: 'key'"></select>
</div>

<!-- <div class="form-group">
        <label for="sizeStyle" class="form-label">
            Size
            <button class="btn btn-info" role="tooltip" data-bind="tooltip: 'Predefined size from style guide.'"></button>
        </label>
        <select id="sizeStyle" class="form-control" data-bind="options: sizeStyles, value: sizeStyle, optionsText: 'displayName', optionsValue: 'key'"></select>
    </div> -->