<form action="" data-o-component="o-forms">
{{#variants}}
	<span class="o-forms-field{{#inline-field}} o-forms-field--inline{{/inline-field}}{{#optional}} o-forms-field--optional{{/optional}}">

		<span	class="o-forms-title{{#title.modifiers}} o-forms-title--{{.}}{{/title.modifiers}}">
			<label class="o-forms-title__main" {{#input.id}}for="{{input.id}}" {{/input.id}}>{{title.main}}</label>
			{{#title.prompt}}<span class="o-forms-title__prompt">{{.}}</span>{{/title.prompt}}
		</span>

		<span class="o-forms-input o-forms-input--{{input.type}}{{#input.modifiers}} o-forms-input--{{.}}{{/input.modifiers}}">

			{{#textInput}}
				<input
					{{#input.id}}id="{{input.id}}" {{/input.id}}
					type="{{input.type}}"
					name="text"
					value="{{input.value}}"
					{{#inputmode}}inputmode="{{.}}"{{/inputmode}}
					{{#pattern}}pattern={{.}}{{/pattern}}
					{{#disabled}}disabled{{/disabled}}
					{{^disabled}}{{^optional}}required{{/optional}}{{/disabled}}>
			{{/textInput}}

			{{#textArea}}
				<textarea
					{{#input.id}}id="{{input.id}}" {{/input.id}}
					{{#inputmode}}inputmode="{{.}}"{{/inputmode}}
					{{#pattern}}pattern={{.}}{{/pattern}}
					{{#disabled}}disabled{{/disabled}}
					{{^disabled}}{{^optional}}required{{/optional}}{{/disabled}}>{{input.value}}</textarea>
			{{/textArea}}

			{{#select}}
				<select
					{{#input.id}}id="{{input.id}}" {{/input.id}}
					{{#multiple}}multiple{{/multiple}}
					{{#disabled}}disabled{{/disabled}}
					{{^disabled}}{{^optional}}required{{/optional}}{{/disabled}}>
					{{#input.selected}}<option value="{{.}}" selected>{{.}}</option>{{/input.selected}}
					{{#input.options}}<option value="{{.}}">{{.}}</option>{{/input.options}}
				</select>
			{{/select}}

			{{#input.error}}<span role=alert class="o-forms-input__error">{{.}}</span>{{/input.error}}
			{{#input.button}}<button class="{{.}}">Submit</button>{{/input.button}}
		</span>

	</span>
{{/variants}}
</form>
