<form action="" data-o-component="o-forms">
{{#variants}}

{{#anchor}}
	<div class="o-forms-input o-forms-input--pseudo-radio-link {{#modifiers}}o-forms-input--{{.}}{{/modifiers}}">
		{{#inputs}}
			<a class="
				o-forms-input__link
				{{#current}} o-forms-input__link--current{{/current}}
				{{#icon}} o-forms-input__link--{{.}}-icon{{/icon}}" href={{href}}>{{value}}</a>
		{{/inputs}}
	</div>
{{/anchor}}

{{^anchor}}

{{#inverse}}<div class="demo-inverse">{{/inverse}}

	<div class="o-forms-field
		{{#inline-field}} o-forms-field--inline{{/inline-field}}
		{{#inverse}} o-forms-field--inverse{{/inverse}}
		{{#optional}} o-forms-field--optional{{/optional}}
		{{#custom}} demo-custom-radio-theme{{/custom}}"
		role="group"
		{{#field.aria}}
			aria-labelledby="{{label}}"
			{{#info}}aria-describedby="{{info}}"{{/info}}
		{{/field.aria}}>

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

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

			{{#radioBox}}<span class="o-forms-input--radio-box__container">{{/radioBox}}

			{{#inputs}}
				<label {{#id}}for="{{id}}" {{/id}}{{#label}}class="{{.}}" {{/label}}>
					{{#label-first}}
						<span class="o-forms-input__label
									{{#modifier}} o-forms-input__label--{{.}}{{/modifier}}
									{{#icon}} o-forms-input__label__{{.}}-icon{{/icon}}"
								{{#aria-label}}aria-hidden="true"{{/aria-label}}>
									{{#date}}{{date}}{{/date}}{{^date}}{{{value}}}{{/date}}
						</span>
					{{/label-first}}
					<input
						{{#id}}id="{{id}}" {{/id}}
						type="{{type}}"
						name="{{name}}"
						value="{{value}}"
						{{#classes}}class={{.}}{{/classes}}
						{{#inputmode}}inputmode="{{.}}"{{/inputmode}}
						{{#pattern}}pattern={{.}}{{/pattern}}
						{{#checked}}checked{{/checked}}
						{{#aria-label}}aria-label="{{.}}"{{/aria-label}}
						{{#aria.label}}aria-labelledby="{{value}}"{{/aria.label}}
						{{#aria.info}}aria-describedby="{{aria.info}}"{{/aria.info}}
						{{#disabled}}disabled{{/disabled}}>

					{{^label-first}}
					{{#name}}
						<span class="o-forms-input__label
									{{#modifier}} o-forms-input__label--{{.}}{{/modifier}}
									{{#icon}} o-forms-input__label__{{.}}-icon{{/icon}}"
								{{#aria-label}}aria-hidden="true"{{/aria-label}}>
								{{#description}}
									<span class="o-forms-input__label__main">
										{{#date}}{{date}}{{/date}}{{^date}}{{{value}}}{{/date}}
									</span>
									<span id="{{aria.info}}" class="o-forms-input__label__prompt">
										{{description}}
									</span>
								{{/description}}
								{{^description}}
									{{#date}}{{date}}{{/date}}{{^date}}{{{value}}}{{/date}}
								{{/description}}

						</span>
					{{/name}}
					{{/label-first}}

					{{#additionalContent}}
						<span class="o-forms-input__label">{{{.}}}</span>
					{{/additionalContent}}
				</label>
			{{/inputs}}

			{{#radioBox}}</span>{{/radioBox}}

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

			{{#field.state}}
				<span aria-label={{field.state}} role=status class="o-forms-input__state {{#field.icon}}o-forms-input__state--icon-only{{/field.icon}}">
				</span>
			{{/field.state}}
		</span>

	</div>

{{#inverse}}</div>{{/inverse}}

{{/anchor}}
{{/variants}}
</form>
