@paperbits/forms
Version:
Paperbits components for form builder.
53 lines (47 loc) • 2.04 kB
HTML
<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>