UNPKG

@paperbits/forms

Version:
53 lines (47 loc) 2.04 kB
<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. Password" data-bind="textInput: label" /> </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" /> </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. P@ssw0rd" data-bind="textInput: placeholder" /> </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 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>