<!-- Error rendering component -->
<!-- Missing helper: "eq" -->
<!-- Error: Missing helper: "eq"
at Object.<anonymous> (/Users/daniellehallett/Developer/TubeSpanner/styleguide/node_modules/handlebars/dist/cjs/handlebars/helpers/helper-missing.js:19:13)
at Object.helperWrapper (/Users/daniellehallett/Developer/TubeSpanner/styleguide/node_modules/promised-handlebars/index.js:130:23)
at Object.<anonymous> (/Users/daniellehallett/Developer/TubeSpanner/styleguide/node_modules/promised-handlebars/lib/utils.js:29:28)
at Object.wrapper (/Users/daniellehallett/Developer/TubeSpanner/styleguide/node_modules/handlebars/dist/cjs/handlebars/internal/wrapHelper.js:15:19)
at Object.eval [as main] (eval at createFunctionContext (/Users/daniellehallett/Developer/TubeSpanner/styleguide/node_modules/handlebars/dist/cjs/handlebars/compiler/javascript-compiler.js:260:23), <anonymous>:18:139)
at main (/Users/daniellehallett/Developer/TubeSpanner/styleguide/node_modules/handlebars/dist/cjs/handlebars/runtime.js:206:32)
at ret (/Users/daniellehallett/Developer/TubeSpanner/styleguide/node_modules/handlebars/dist/cjs/handlebars/runtime.js:210:12)
at ret (/Users/daniellehallett/Developer/TubeSpanner/styleguide/node_modules/handlebars/dist/cjs/handlebars/compiler/compiler.js:519:21)
at prepareAndResolveMarkers (/Users/daniellehallett/Developer/TubeSpanner/styleguide/node_modules/promised-handlebars/index.js:99:39)
at /Users/daniellehallett/Developer/TubeSpanner/styleguide/node_modules/promised-handlebars/lib/utils.js:29:28
at HandlebarsAdapter.render (/Users/daniellehallett/Developer/TubeSpanner/styleguide/node_modules/@frctl/handlebars/src/adapter.js:37:30)
at ComponentSource._renderVariant (/Users/daniellehallett/Developer/TubeSpanner/styleguide/node_modules/@frctl/fractal/src/api/components/source.js:212:30)
at _renderVariant.next (<anonymous>)
at onFulfilled (/Users/daniellehallett/Developer/TubeSpanner/styleguide/node_modules/co/index.js:65:19) -->
<div class="control-field{{#if error}} has-error{{/if}}">
<label class="form-label" for="field-{{id}}">
{{label}}{{#if required}}<span style="color:var(--danger);margin-left:2px;">*</span>{{/if}}
</label>
{{#if (eq type "textarea")}}
<textarea
class="form-control"
id="field-{{id}}"
rows="{{rows}}"
placeholder="{{placeholder}}"
{{#if disabled}}disabled{{/if}}
>{{value}}</textarea>
{{else if (eq type "select")}}
<select class="form-control" id="field-{{id}}" {{#if disabled}}disabled{{/if}}>
{{#each options}}
<option {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
{{/each}}
</select>
{{else}}
<input
type="{{type}}"
class="form-control"
id="field-{{id}}"
placeholder="{{placeholder}}"
value="{{value}}"
{{#if disabled}}disabled{{/if}}
>
{{/if}}
{{#if hint}}<small class="form-text" style="color:var(--paragraph);margin-top:4px;display:block;">{{hint}}</small>{{/if}}
{{#if error}}<small style="color:var(--danger);margin-top:4px;display:block;">{{error}}</small>{{/if}}
</div>
{
"id": "channel-name",
"label": "Channel name",
"type": "text",
"placeholder": "Enter your channel name",
"value": "",
"required": true,
"disabled": false,
"hint": null,
"error": null,
"rows": 3,
"options": []
}
Wrapper is .control-field. Always pair a .form-label with a .form-control. Supports text, email, password, textarea, and select. Focus ring uses --primary-color (purple).
Appears in: Account settings, channel setup wizard, Social Bio editor, Script Generator (topic/keywords inputs), SEO Optimiser, Audience Avatars, Social Planner post composer.