DAHLIA Pattern Library

Text Input: Default 

<label for="textInput" class="">Text input</label>
<input type="text" id="textInput" name="textInput" placeholder="Type here" aria-describedby="described-id" />
 
<label for="{{default name 'textInput'}}" class="{{default classes ''}}">{{default label "Text input"}}</label>
<input type="{{default input 'text'}}" id="{{default id 'textInput'}}" name="{{default name 'textInput'}}" placeholder="{{default placeholder 'Type here'}}" aria-describedby="{{default described-id 'described-id'}}" />
{{#if note}}
<span class="form-note shift-up" id="{{default described-id '{{note}}-id'}}">{{default note "Some"}}</span>
{{/if}}
 
/* No context defined for this component. */

When labels and inputs are separated, make sure the two are connected so screen readers will know (and to keep the labels clickable!).