Origami Frontend Components & Services

Demos: o-forms

Anchor elements that imitate box-style radio inputs

Checkboxes

Checkbox inputs with a default squared style

<div class="o-forms-field
		
		
		 o-forms-field--optional
		" role="group" aria-labelledby="checkbox-group-title" aria-describedby="checkbox-group-info">
		
		<span class="o-forms-title" aria-hidden="true">
			<span class="o-forms-title__main" id="checkbox-group-title">Stacked checkboxes</span>
				<span class="o-forms-title__prompt" id="checkbox-group-info">Optional prompt/description text</span>
		</span>

		<span class="o-forms-input o-forms-input--checkbox">

			

				<label>
					<input type="checkbox" name="default" value="Stacked 1" aria-label="Stacked 1" checked>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Stacked 1
						</span>

				</label>
				<label>
					<input type="checkbox" name="default" value="Stacked 2" aria-label="Stacked 2">

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Stacked 2
						</span>

				</label>
				<label>
					<input type="checkbox" name="default" value="Stacked 3" aria-label="Stacked 3" checked>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Stacked 3
						</span>

				</label>

			

			

			
		</span>
	
	</div>







	
	<div class="o-forms-field
		
		
		
		" role="group" aria-labelledby="disabed-checkbox-group-title">
		
		<span class="o-forms-title" aria-hidden="true">
			<span class="o-forms-title__main" id="disabed-checkbox-group-title">Disabled checkboxes</span>
		</span>

		<span class="o-forms-input o-forms-input--checkbox">

			

				<label>
					<input type="checkbox" name="disabled" value="Disabled 1" aria-label="Disabled 1" checked disabled>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Disabled 1
						</span>

				</label>
				<label>
					<input type="checkbox" name="disabled" value="Disabled 2" aria-label="Disabled 2" disabled>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Disabled 2
						</span>

				</label>

			

			

			
		</span>
	
	</div>







	
	<div class="o-forms-field
		
		
		
		" role="group" aria-labelledby="error-checkbox-group-title">
		
		<span class="o-forms-title" aria-hidden="true">
			<span class="o-forms-title__main" id="error-checkbox-group-title">Error checkboxes</span>
		</span>

		<span class="o-forms-input o-forms-input--checkbox o-forms-input--invalid">

			

				<label>
					<input type="checkbox" name="error" value="Error 1" aria-label="Error 1" required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Error 1
						</span>

				</label>
				<label>
					<input type="checkbox" name="error" value="Error 2" aria-label="Error 2" required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Error 2
						</span>

				</label>

			

			<span class="o-forms-input__error">Please select at least one option</span>

			
		</span>
	
	</div>







	
	<div class="o-forms-field
		
		
		
		" role="group" aria-labelledby="inline-checkbox-group-title">
		
		<span class="o-forms-title" aria-hidden="true">
			<span class="o-forms-title__main" id="inline-checkbox-group-title">Inline checkboxes</span>
		</span>

		<span class="o-forms-input o-forms-input--checkbox o-forms-input--inline">

			

				<label>
					<input type="checkbox" name="inline" value="Inlined 1" aria-label="Inlined 1" checked required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Inlined 1
						</span>

				</label>
				<label>
					<input type="checkbox" name="inline" value="This is be a very long inlined checkbox to demonstrate the correct alignment of checkboxes" aria-label="This is be a very long inlined checkbox to demonstrate the correct alignment of checkboxes" required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									This is be a very long inlined checkbox to demonstrate the correct alignment of checkboxes
						</span>

				</label>
				<label>
					<input type="checkbox" name="inline" value="Inlined 3" aria-label="Inlined 3" required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Inlined 3
						</span>

				</label>

			

			

			
		</span>
	
	</div>







	
	<div class="o-forms-field
		 o-forms-field--inline
		
		
		" role="group" aria-labelledby="inline-field-inline-checkbox-group-title">
		
		<span class="o-forms-title" aria-hidden="true">
			<span class="o-forms-title__main" id="inline-field-inline-checkbox-group-title">Inline field and checkboxes</span>
		</span>

		<span class="o-forms-input o-forms-input--checkbox o-forms-input--inline">

			

				<label>
					<input type="checkbox" name="inline-field" value="Inline 1" aria-label="Inline 1" checked required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Inline 1
						</span>

				</label>
				<label>
					<input type="checkbox" name="inline-field" value="Inline 2" aria-label="Inline 2" required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Inline 2
						</span>

				</label>

			

			

			
		</span>
	
	</div>







	
	<div class="o-forms-field
		 o-forms-field--inline
		
		
		" role="group" aria-labelledby="inline-field-checkbox-group-title">
		
		<span class="o-forms-title" aria-hidden="true">
			<span class="o-forms-title__main" id="inline-field-checkbox-group-title">Inline field and stacked checkboxes</span>
		</span>

		<span class="o-forms-input o-forms-input--checkbox">

			

				<label>
					<input type="checkbox" name="inline-stacked" value="Inline 1" aria-label="Inline 1" required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Inline 1
						</span>

				</label>
				<label>
					<input type="checkbox" name="inline-stacked" value="Inline 2" aria-label="Inline 2" checked required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Inline 2
						</span>

				</label>
				<label>
					<input type="checkbox" name="inline-stacked" value="Inline 3" aria-label="Inline 3" checked required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Inline 3
						</span>

				</label>

			

			

			
		</span>
	
	</div>







	
	<div class="o-forms-field
		
		
		
		" role="group" aria-labelledby="password-checkbox-group-title" aria-describedby="password-checkbox-group-info">
		
		<span class="o-forms-title" aria-hidden="true">
			<span class="o-forms-title__main" id="password-checkbox-group-title">Right side checkboxes</span>
				<span class="o-forms-title__prompt" id="password-checkbox-group-info">Interface demo only, password hide/show functionality is not currently included in o-forms.</span>
		</span>

		<span class="o-forms-input o-forms-input--checkbox o-forms-input--password">

			

				<label>
					<input type="password" name="" value="password" aria-label="password" required>


				</label>
				<label class="o-forms-input__right">
					<input type="checkbox" name="show" value="Show password" aria-label="Show password" required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Show password
						</span>

				</label>

			

			

			
		</span>
	
	</div>







	
	<div class="o-forms-field
		
		
		
		" role="group" aria-labelledby="extra-content-checkbox-group-title" aria-describedby="extra-content-checkbox-group-info">
		
		<span class="o-forms-title" aria-hidden="true">
			<span class="o-forms-title__main" id="extra-content-checkbox-group-title">Checkboxes with extra content</span>
				<span class="o-forms-title__prompt" id="extra-content-checkbox-group-info">Indeterminate interface demo only, select/unselect all functionality is not currently included in o-forms</span>
		</span>

		<span class="o-forms-input o-forms-input--checkbox">

			

				<label>
					<input type="checkbox" name="extra" value="Select All" aria-label="Select All" required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Select All
						</span>

				</label>
				<label>
					<input type="checkbox" name="extra" value="I confirm I have read and agree to the terms &amp;amp; conditions, privacy policy and cookie policy*." aria-label="I confirm I have read and agree to the terms &amp;amp; conditions, privacy policy and cookie policy*." required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									I confirm I have read and agree to the terms &amp;amp; conditions, privacy policy and cookie policy*.
						</span>

						<span class="o-forms-input__label" aria-hidden="true">We will send you occasional emails to improve your experience of the Financial Times.</span>
				</label>
				<label>
					<input type="checkbox" name="extra" value="By submitting this form, you indicate your consent to also being contacted by the Financial Times by email. post or phone about our other products, services or special offers unless you untick this box. You can change your preferences anytime in the My Account section." aria-label="By submitting this form, you indicate your consent to also being contacted by the Financial Times by email. post or phone about our other products, services or special offers unless you untick this box. You can change your preferences anytime in the My Account section." checked required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									By submitting this form, you indicate your consent to also being contacted by the Financial Times by email. post or phone about our other products, services or special offers unless you untick this box. You can change your preferences anytime in the My Account section.
						</span>

				</label>

			

			

			
		</span>
	
	</div>

Date input

Date input with text fields instead of a date picker

<div class="o-forms-field
		
		
		 o-forms-field--optional
		" role="group" aria-labelledby="date-group-title" aria-describedby="date-group-info">
		
		<span class="o-forms-title" aria-hidden="true">
			<span class="o-forms-title__main" id="date-group-title">Date input</span>
				<span class="o-forms-title__prompt" id="date-group-info">Optional prompt/description text</span>
		</span>

		<span class="o-forms-input o-forms-input--date">

			

				<label>
					<input type="text" name="date" value="" pattern="[0-9]{2}" aria-label="">

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									DD
						</span>

				</label>
				<label>
					<input type="text" name="date" value="" pattern="0?[1-9]|1[012]" aria-label="">

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									MM
						</span>

				</label>
				<label>
					<input type="text" name="date" value="" pattern="[0-9]{4}" aria-label="">

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									YYYY
						</span>

				</label>

			

			

			
		</span>
	
	</div>







	
	<div class="o-forms-field
		
		
		
		" role="group" aria-labelledby="disabled-date-group-title">
		
		<span class="o-forms-title" aria-hidden="true">
			<span class="o-forms-title__main" id="disabled-date-group-title">Disabled date input</span>
		</span>

		<span class="o-forms-input o-forms-input--date">

			

				<label>
					<input type="text" name="disabled-date" value="" pattern="[0-9]{2}" aria-label="" disabled>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									DD
						</span>

				</label>
				<label>
					<input type="text" name="disabled-date" value="" pattern="0?[1-9]|1[012]" aria-label="" disabled>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									MM
						</span>

				</label>
				<label>
					<input type="text" name="disabled-date" value="" pattern="[0-9]{4}" aria-label="" disabled>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									YYYY
						</span>

				</label>

			

			

			
		</span>
	
	</div>







	
	<div class="o-forms-field
		
		
		
		" role="group" aria-labelledby="error-date-group-title" aria-describedby="error-date-group-info">
		
		<span class="o-forms-title" aria-hidden="true">
			<span class="o-forms-title__main" id="error-date-group-title">Invalid date input</span>
				<span class="o-forms-title__prompt" id="error-date-group-info">Exemplifies a pattern mismatch</span>
		</span>

		<span class="o-forms-input o-forms-input--date o-forms-input--invalid">

			

				<label>
					<input type="text" name="invalid-date" value="01" pattern="[0-9]{2}" aria-label="01" required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									DD
						</span>

				</label>
				<label>
					<input type="text" name="invalid-date" value="24" pattern="0?[1-9]|1[012]" aria-label="24" required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									MM
						</span>

				</label>
				<label>
					<input type="text" name="invalid-date" value="2019" pattern="[0-9]{4}" aria-label="2019" required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									YYYY
						</span>

				</label>

			

			<span class="o-forms-input__error">Not a valid date</span>

			
		</span>
	
	</div>







	
	<div class="o-forms-field
		 o-forms-field--inline
		
		
		" role="group" aria-labelledby="inline-date-group-title">
		
		<span class="o-forms-title" aria-hidden="true">
			<span class="o-forms-title__main" id="inline-date-group-title">Inline date input</span>
		</span>

		<span class="o-forms-input o-forms-input--date o-forms-input--inline">

			

				<label>
					<input type="text" name="inline-date" value="" pattern="[0-9]{2}" aria-label="" required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									DD
						</span>

				</label>
				<label>
					<input type="text" name="inline-date" value="" pattern="0?[1-9]|1[012]" aria-label="" required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									MM
						</span>

				</label>
				<label>
					<input type="text" name="inline-date" value="" pattern="[0-9]{4}" aria-label="" required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									YYYY
						</span>

				</label>

			

			

			
		</span>
	
	</div>

Box-styled radio inputs

Radio button inputs with a box-like style

<div class="o-forms-field
		
		
		 o-forms-field--optional
		" role="group" aria-labelledby="radio-box-group-title" aria-describedby="radio-box-group-info">
		
		<span class="o-forms-title" aria-hidden="true">
			<span class="o-forms-title__main" id="radio-box-group-title">Box style radio buttons</span>
				<span class="o-forms-title__prompt" id="radio-box-group-info">Optional prompt text</span>
		</span>

		<span class="o-forms-input o-forms-input--radio-box">

			<div class="o-forms-input--radio-box__container">

				<label>
					<input type="radio" name="default" value="Daily" aria-label="Daily" checked>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Daily
						</span>

				</label>
				<label>
					<input type="radio" name="default" value="Weekly" aria-label="Weekly">

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Weekly
						</span>

				</label>

			</div>

			

			
		</span>
	
	</div>







	
	<div class="o-forms-field
		
		
		
		" role="group" aria-labelledby="negative-radio-box-group-title" aria-describedby="negative-radio-box-group-info">
		
		<span class="o-forms-title" aria-hidden="true">
			<span class="o-forms-title__main" id="negative-radio-box-group-title">Negative highlight</span>
				<span class="o-forms-title__prompt" id="negative-radio-box-group-info">Requires a modifier on the label</span>
		</span>

		<span class="o-forms-input o-forms-input--radio-box o-forms-input--inline">

			<div class="o-forms-input--radio-box__container">

				<label>
					<input type="radio" name="negative" value="Yes" aria-label="Yes" required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Yes
						</span>

				</label>
				<label>
					<input type="radio" name="negative" value="No" aria-label="No" checked required>

						<span class="o-forms-input__label
									 o-forms-input__label--negative
									" aria-hidden="true">
									No
						</span>

				</label>

			</div>

			

			
		</span>
	
	</div>







	
	<div class="o-forms-field
		
		
		
		" role="group" aria-labelledby="multiple-radio-box-group-title">
		
		<span class="o-forms-title" aria-hidden="true">
			<span class="o-forms-title__main" id="multiple-radio-box-group-title">Multiple box-styled radio buttons</span>
		</span>

		<span class="o-forms-input o-forms-input--radio-box">

			<div class="o-forms-input--radio-box__container">

				<label>
					<input type="radio" name="multiple" value="Daily" aria-label="Daily" required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Daily
						</span>

				</label>
				<label>
					<input type="radio" name="multiple" value="Weekly" aria-label="Weekly" checked required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Weekly
						</span>

				</label>
				<label>
					<input type="radio" name="multiple" value="Monthly" aria-label="Monthly" required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Monthly
						</span>

				</label>

			</div>

			

			
		</span>
	
	</div>







	
	<div class="o-forms-field
		
		
		
		" role="group" aria-labelledby="disabed-radio-box-group-title">
		
		<span class="o-forms-title" aria-hidden="true">
			<span class="o-forms-title__main" id="disabed-radio-box-group-title">Disabled box-styled radio buttons</span>
		</span>

		<span class="o-forms-input o-forms-input--radio-box">

			<div class="o-forms-input--radio-box__container">

				<label>
					<input type="radio" name="disabled" value="Daily" aria-label="Daily" checked disabled>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Daily
						</span>

				</label>
				<label>
					<input type="radio" name="disabled" value="Monthly" aria-label="Monthly" disabled>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Monthly
						</span>

				</label>

			</div>

			

			
		</span>
	
	</div>







	
	<div class="o-forms-field
		
		
		
		" role="group" aria-labelledby="error-radio-box-group-title">
		
		<span class="o-forms-title" aria-hidden="true">
			<span class="o-forms-title__main" id="error-radio-box-group-title">Error box-style radio buttons</span>
		</span>

		<span class="o-forms-input o-forms-input--radio-box o-forms-input--invalid">

			<div class="o-forms-input--radio-box__container">

				<label>
					<input type="radio" name="error" value="Yes" aria-label="Yes" required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Yes
						</span>

				</label>
				<label>
					<input type="radio" name="error" value="No" aria-label="No" required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									No
						</span>

				</label>

			</div>

			<span class="o-forms-input__error">Please select an option</span>

			
		</span>
	
	</div>







	
	<div class="o-forms-field
		 o-forms-field--inline
		
		
		" role="group" aria-labelledby="inline-radio-box-group-title">
		
		<span class="o-forms-title" aria-hidden="true">
			<span class="o-forms-title__main" id="inline-radio-box-group-title">V-centered inline radio box</span>
		</span>

		<span class="o-forms-input o-forms-input--radio-box o-forms-input--inline">

			<div class="o-forms-input--radio-box__container">

				<label>
					<input type="radio" name="inline" value="Daily" aria-label="Daily" checked required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Daily
						</span>

				</label>
				<label>
					<input type="radio" name="inline" value="Weekly" aria-label="Weekly" required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Weekly
						</span>

				</label>

			</div>

			

			<span class="o-forms-input__state "></span>
		</span>
	
	</div>







	
	<div class="o-forms-field
		 o-forms-field--inline
		
		
		" role="group" aria-labelledby="saving-state-group-title" aria-describedby="saving-state-group-info">
		
		<span class="o-forms-title" aria-hidden="true">
			<span class="o-forms-title__main" id="saving-state-group-title">Inline box-style radio buttons</span>
				<span class="o-forms-title__prompt" id="saving-state-group-info">With a stacked saving state</span>
		</span>

		<span class="o-forms-input o-forms-input--radio-box o-forms-input--saving">

			<div class="o-forms-input--radio-box__container">

				<label>
					<input type="radio" name="saving" value="Daily" aria-label="Daily" checked required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Daily
						</span>

				</label>
				<label>
					<input type="radio" name="saving" value="Weekly" aria-label="Weekly" required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Weekly
						</span>

				</label>

			</div>

			

			<span class="o-forms-input__state "></span>
		</span>
	
	</div>







	
	<div class="o-forms-field
		 o-forms-field--inline
		
		
		" role="group" aria-labelledby="saved-state-group-title">
		
		<span class="o-forms-title" aria-hidden="true">
			<span class="o-forms-title__main" id="saved-state-group-title">Inline saved state</span>
		</span>

		<span class="o-forms-input o-forms-input--radio-box o-forms-input--saved o-forms-input--inline">

			<div class="o-forms-input--radio-box__container">

				<label>
					<input type="radio" name="saved" value="Daily" aria-label="Daily" required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Daily
						</span>

				</label>
				<label>
					<input type="radio" name="saved" value="Weekly" aria-label="Weekly" checked required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Weekly
						</span>

				</label>

			</div>

			

			<span class="o-forms-input__state "></span>
		</span>
	
	</div>







	
	<div class="o-forms-field
		 o-forms-field--inline
		
		
		" role="group" aria-labelledby="saving-state-group-title" aria-describedby="saving-state-group-info">
		
		<span class="o-forms-title" aria-hidden="true">
			<span class="o-forms-title__main" id="saving-state-group-title">Inline saving state</span>
				<span class="o-forms-title__prompt" id="saving-state-group-info">Icon only&#x2014;also available for saved state</span>
		</span>

		<span class="o-forms-input o-forms-input--radio-box o-forms-input--saving o-forms-input--inline">

			<div class="o-forms-input--radio-box__container">

				<label>
					<input type="radio" name="icon" value="Daily" aria-label="Daily" checked required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Daily
						</span>

				</label>
				<label>
					<input type="radio" name="icon" value="Weekly" aria-label="Weekly" required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Weekly
						</span>

				</label>

			</div>

			

			<span class="o-forms-input__state o-forms-input__state--icon-only"></span>
		</span>
	
	</div>

Round-styled radio inputs

Radio button inputs with a default circular style

<div class="o-forms-field
		
		
		 o-forms-field--optional
		" role="group" aria-labelledby="radio-round-group-title" aria-describedby="radio-round-group-info">
		
		<span class="o-forms-title" aria-hidden="true">
			<span class="o-forms-title__main" id="radio-round-group-title">Default round-style radio buttons</span>
				<span class="o-forms-title__prompt" id="radio-round-group-info">Optional prompt/description text</span>
		</span>

		<span class="o-forms-input o-forms-input--radio-round">

			

				<label>
					<input type="radio" name="default" value="Default 1" aria-label="Default 1" checked>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Default 1
						</span>

				</label>
				<label>
					<input type="radio" name="default" value="Default 2" aria-label="Default 2">

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Default 2
						</span>

				</label>

			

			

			
		</span>
	
	</div>







	
	<div class="o-forms-field
		
		
		
		" role="group" aria-labelledby="inline-radio-round-group-title">
		
		<span class="o-forms-title" aria-hidden="true">
			<span class="o-forms-title__main" id="inline-radio-round-group-title">Inline round-style radio buttons</span>
		</span>

		<span class="o-forms-input o-forms-input--radio-round o-forms-input--inline">

			

				<label>
					<input type="radio" name="inline-radio" value="Inlined 1" aria-label="Inlined 1" checked required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Inlined 1
						</span>

				</label>
				<label>
					<input type="radio" name="inline-radio" value="Inlined 2" aria-label="Inlined 2" required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Inlined 2
						</span>

				</label>
				<label>
					<input type="radio" name="inline-radio" value="Inlined 3" aria-label="Inlined 3" required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Inlined 3
						</span>

				</label>

			

			

			
		</span>
	
	</div>







	
	<div class="o-forms-field
		
		
		
		" role="group" aria-labelledby="disabed-radio-round-group-title">
		
		<span class="o-forms-title" aria-hidden="true">
			<span class="o-forms-title__main" id="disabed-radio-round-group-title">Disabled radio buttons</span>
		</span>

		<span class="o-forms-input o-forms-input--radio-round">

			

				<label>
					<input type="radio" name="disabled" value="Disabled 1" aria-label="Disabled 1" checked disabled>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Disabled 1
						</span>

				</label>
				<label>
					<input type="radio" name="disabled" value="Disabled 2" aria-label="Disabled 2" disabled>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Disabled 2
						</span>

				</label>

			

			

			
		</span>
	
	</div>







	
	<div class="o-forms-field
		
		
		
		" role="group" aria-labelledby="error-radio-round-group-title">
		
		<span class="o-forms-title" aria-hidden="true">
			<span class="o-forms-title__main" id="error-radio-round-group-title">Error round-style radio buttons</span>
		</span>

		<span class="o-forms-input o-forms-input--radio-round o-forms-input--invalid">

			

				<label>
					<input type="radio" name="error" value="Error 1" aria-label="Error 1" required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Error 1
						</span>

				</label>
				<label>
					<input type="radio" name="error" value="Error 2" aria-label="Error 2" required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Error 2
						</span>

				</label>

			

			<span class="o-forms-input__error">Please select an option</span>

			
		</span>
	
	</div>







	
	<div class="o-forms-field
		
		
		
		" role="group" aria-labelledby="inline-radio-round-group-title">
		
		<span class="o-forms-title" aria-hidden="true">
			<span class="o-forms-title__main" id="inline-radio-round-group-title">Inline round-style radio buttons</span>
		</span>

		<span class="o-forms-input o-forms-input--radio-round o-forms-input--inline">

			

				<label>
					<input type="radio" name="inline" value="Inlined 1" aria-label="Inlined 1" checked required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Inlined 1
						</span>

				</label>
				<label>
					<input type="radio" name="inline" value="Inlined 2" aria-label="Inlined 2" required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Inlined 2
						</span>

				</label>
				<label>
					<input type="radio" name="inline" value="Inlined 3" aria-label="Inlined 3" required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Inlined 3
						</span>

				</label>

			

			

			
		</span>
	
	</div>







	
	<div class="o-forms-field
		 o-forms-field--inline
		
		
		" role="group" aria-labelledby="inline-field-radio-round-group-title">
		
		<span class="o-forms-title" aria-hidden="true">
			<span class="o-forms-title__main" id="inline-field-radio-round-group-title">Inline field and radio buttons</span>
		</span>

		<span class="o-forms-input o-forms-input--radio-round o-forms-input--inline">

			

				<label>
					<input type="radio" name="inline-field" value="Inlined 1" aria-label="Inlined 1" checked required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Inlined 1
						</span>

				</label>
				<label>
					<input type="radio" name="inline-field" value="Inlined 2" aria-label="Inlined 2" required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Inlined 2
						</span>

				</label>

			

			

			
		</span>
	
	</div>







	
	<div class="o-forms-field
		 o-forms-field--inline
		
		
		" role="group" aria-labelledby="inline-field-stacked-radio-round-group-title" aria-describedby="inline-field-stacked-radio-round-group-info">
		
		<span class="o-forms-title" aria-hidden="true">
			<span class="o-forms-title__main" id="inline-field-stacked-radio-round-group-title">Inline field</span>
				<span class="o-forms-title__prompt" id="inline-field-stacked-radio-round-group-info">And stacked radio buttons</span>
		</span>

		<span class="o-forms-input o-forms-input--radio-round">

			

				<label>
					<input type="radio" name="inline-stacked" value="Inlined 1" aria-label="Inlined 1" checked required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Inlined 1
						</span>

				</label>
				<label>
					<input type="radio" name="inline-stacked" value="Inlined 2" aria-label="Inlined 2" required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Inlined 2
						</span>

				</label>
				<label>
					<input type="radio" name="inline-stacked" value="Inlined 3" aria-label="Inlined 3" required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Inlined 3
						</span>

				</label>

			

			

			
		</span>
	
	</div>

Toggle

Checkbox inputs with a toggle style

<div class="o-forms-field
		
		
		 o-forms-field--optional
		" role="group" aria-labelledby="toggle-group-title" aria-describedby="toggle-group-info">
		
		<span class="o-forms-title" aria-hidden="true">
			<span class="o-forms-title__main" id="toggle-group-title">Default toggle inputs</span>
				<span class="o-forms-title__prompt" id="toggle-group-info">Optional prompt text</span>
		</span>

		<span class="o-forms-input o-forms-input--toggle">

			

				<label>
					<input type="checkbox" name="default" value="Stacked 1" aria-label="Stacked 1" checked>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Stacked 1
						</span>

				</label>
				<label>
					<input type="checkbox" name="default" value="Stacked 2" aria-label="Stacked 2">

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Stacked 2
						</span>

				</label>

			

			

			
		</span>
	
	</div>







	
	<div class="o-forms-field
		
		
		
		" role="group" aria-labelledby="inlined-toggle-group-title">
		
		<span class="o-forms-title" aria-hidden="true">
			<span class="o-forms-title__main" id="inlined-toggle-group-title">Inline toggle inputs</span>
		</span>

		<span class="o-forms-input o-forms-input--toggle o-forms-input--inline">

			

				<label>
					<input type="checkbox" name="optional" value="Optional 1" aria-label="Optional 1" checked required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Optional 1
						</span>

				</label>
				<label>
					<input type="checkbox" name="optional" value="Optional 2" aria-label="Optional 2" required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Optional 2
						</span>

				</label>

			

			

			
		</span>
	
	</div>







	
	<div class="o-forms-field
		
		
		
		" role="group" aria-labelledby="disabed-toggle-group-title">
		
		<span class="o-forms-title" aria-hidden="true">
			<span class="o-forms-title__main" id="disabed-toggle-group-title">Disabled toggle inputs</span>
		</span>

		<span class="o-forms-input o-forms-input--toggle">

			

				<label>
					<input type="checkbox" name="disabled" value="Disabled 1" aria-label="Disabled 1" checked disabled>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Disabled 1
						</span>

				</label>
				<label>
					<input type="checkbox" name="disabled" value="Disabled 2" aria-label="Disabled 2" disabled>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Disabled 2
						</span>

				</label>

			

			

			
		</span>
	
	</div>







	
	<div class="o-forms-field
		
		
		
		" role="group" aria-labelledby="error-toggle-group-title">
		
		<span class="o-forms-title" aria-hidden="true">
			<span class="o-forms-title__main" id="error-toggle-group-title">Error toggle inputs</span>
		</span>

		<span class="o-forms-input o-forms-input--toggle o-forms-input--invalid">

			

				<label>
					<input type="checkbox" name="error" value="Error 1" aria-label="Error 1" checked required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Error 1
						</span>

				</label>
				<label>
					<input type="checkbox" name="error" value="Error 2" aria-label="Error 2" required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Error 2
						</span>

				</label>

			

			<span class="o-forms-input__error">Something has gone wrong.</span>

			
		</span>
	
	</div>







	
	<div class="o-forms-field
		 o-forms-field--inline
		
		
		" role="group" aria-labelledby="inline-field-toggle-group-title">
		
		<span class="o-forms-title" aria-hidden="true">
			<span class="o-forms-title__main" id="inline-field-toggle-group-title">Inline field with toggle</span>
		</span>

		<span class="o-forms-input o-forms-input--toggle">

			

				<label>
					<input type="checkbox" name="inline-field" value="Inlined 1" aria-label="Inlined 1" checked required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Inlined 1
						</span>

				</label>
				<label>
					<input type="checkbox" name="inline-field" value="Inlined 2" aria-label="Inlined 2" required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Inlined 2
						</span>

				</label>

			

			

			
		</span>
	
	</div>







	
	<div class="o-forms-field
		 o-forms-field--inline
		
		
		" role="group" aria-labelledby="inline-field-toggle-group-title">
		
		<span class="o-forms-title" aria-hidden="true">
			<span class="o-forms-title__main" id="inline-field-toggle-group-title">Inline field with inline toggle</span>
		</span>

		<span class="o-forms-input o-forms-input--toggle o-forms-input--inline">

			

				<label>
					<input type="checkbox" name="inline-all" value="Inlined 1" aria-label="Inlined 1" checked required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Inlined 1
						</span>

				</label>
				<label>
					<input type="checkbox" name="inline-all" value="Inlined 2" aria-label="Inlined 2" required>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Inlined 2
						</span>

				</label>

			

			

			
		</span>
	
	</div>






<div class="demo-inverse">
	
	<div class="o-forms-field
		
		 o-forms-field--inverse
		 o-forms-field--optional
		" role="group" aria-labelledby="inverse-toggle-group-title">
		
		<span class="o-forms-title" aria-hidden="true">
			<span class="o-forms-title__main" id="inverse-toggle-group-title">Inverse checkboxes</span>
				<span class="o-forms-title__prompt">Inverse prompt text</span>
		</span>

		<span class="o-forms-input o-forms-input--toggle">

			

				<label>
					<input type="checkbox" name="inverse" value="Inverse 1" aria-label="Inverse 1" checked>

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Inverse 1
						</span>

				</label>
				<label>
					<input type="checkbox" name="inverse" value="Inverse 2" aria-label="Inverse 2">

						<span class="o-forms-input__label
									
									" aria-hidden="true">
									Inverse 2
						</span>

				</label>

			

			

			
		</span>
	
	</div>

</div>

Text input

Regular text input

<label class="o-forms-field o-forms-field--optional">
		
		<span class="o-forms-title">
			<span class="o-forms-title__main">Optional text input</span>
			<span class="o-forms-title__prompt">Optional prompt text</span>
		</span>

		<span class="o-forms-input o-forms-input--text">

				<input type="text" name="text" value="">
			


			
			
		</span>
	
	</label>
	<label class="o-forms-field">
		
		<span class="o-forms-title">
			<span class="o-forms-title__main">Text input with a valid entry</span>
			
		</span>

		<span class="o-forms-input o-forms-input--text o-forms-input--valid">

				<input type="text" name="text" value="Valid Input" required>
			


			
			
		</span>
	
	</label>
	<label class="o-forms-field">
		
		<span class="o-forms-title">
			<span class="o-forms-title__main">Text input with an invalid entry</span>
			
		</span>

		<span class="o-forms-input o-forms-input--text o-forms-input--invalid">

				<input type="text" name="text" value="" required>
			


			<span class="o-forms-input__error">Please fill out this field</span>
			
		</span>
	
	</label>
	<label class="o-forms-field">
		
		<span class="o-forms-title">
			<span class="o-forms-title__main">Disabled text input</span>
			
		</span>

		<span class="o-forms-input o-forms-input--text">

				<input type="text" name="text" value="Disabled" disabled>
			


			
			
		</span>
	
	</label>
	<label class="o-forms-field">
		
		<span class="o-forms-title">
			<span class="o-forms-title__main">Small text input</span>
			
		</span>

		<span class="o-forms-input o-forms-input--text o-forms-input--small">

				<input type="text" name="text" value="Value" required>
			


			
			
		</span>
	
	</label>
	<label class="o-forms-field o-forms-field--optional">
		
		<span class="o-forms-title">
			<span class="o-forms-title__main">Text input with suffix</span>
			
		</span>

		<span class="o-forms-input o-forms-input--text o-forms-input--suffix">

				<input type="text" name="text" value="">
			


			
			<button class="o-buttons o-buttons--big">Go</button>
		</span>
	
	</label>
	<label class="o-forms-field">
		
		<span class="o-forms-title">
			<span class="o-forms-title__main">Small text input with suffix</span>
			
		</span>

		<span class="o-forms-input o-forms-input--text o-forms-input--small o-forms-input--suffix">

				<input type="text" name="text" value="" required>
			


			
			<button class="o-buttons">Go</button>
		</span>
	
	</label>
	<label class="o-forms-field o-forms-field--inline o-forms-field--optional">
		
		<span class="o-forms-title o-forms-title--shrink o-forms-title--vertical-center">
			<span class="o-forms-title__main">Shrunken title</span>
			<span class="o-forms-title__prompt">Vertically centered</span>
		</span>

		<span class="o-forms-input o-forms-input--text">

				<input type="text" name="text" value="">
			


			
			
		</span>
	
	</label>
	<label class="o-forms-field">
		
		<span class="o-forms-title">
			<span class="o-forms-title__main">Password input</span>
			
		</span>

		<span class="o-forms-input o-forms-input--password">

				<input type="password" name="text" value="password" required>
			


			
			
		</span>
	
	</label>

Text Area

Regular textarea input

<label class="o-forms-field o-forms-field--optional">
		
		<span class="o-forms-title">
			<span class="o-forms-title__main">Optional text area</span>
			<span class="o-forms-title__prompt">Optional prompt text</span>
		</span>

		<span class="o-forms-input o-forms-input--textarea">

			
				<textarea></textarea>


			
			
		</span>
	
	</label>
	<label class="o-forms-field">
		
		<span class="o-forms-title">
			<span class="o-forms-title__main">Text area with a valid entry</span>
			
		</span>

		<span class="o-forms-input o-forms-input--textarea o-forms-input--valid">

			
				<textarea required>Yup!</textarea>


			
			
		</span>
	
	</label>
	<label class="o-forms-field">
		
		<span class="o-forms-title">
			<span class="o-forms-title__main">Text area with an invalid entry</span>
			
		</span>

		<span class="o-forms-input o-forms-input--textarea o-forms-input--invalid">

			
				<textarea required></textarea>


			<span class="o-forms-input__error">Please fill out this field</span>
			
		</span>
	
	</label>
	<label class="o-forms-field">
		
		<span class="o-forms-title">
			<span class="o-forms-title__main">Disabled text area</span>
			
		</span>

		<span class="o-forms-input o-forms-input--textarea">

			
				<textarea disabled>Disabled</textarea>


			
			
		</span>
	
	</label>
	<label class="o-forms-field o-forms-field--inline">
		
		<span class="o-forms-title">
			<span class="o-forms-title__main">Inline text area</span>
			<span class="o-forms-title__prompt">Inline text area fields can be set in this way.</span>
		</span>

		<span class="o-forms-input o-forms-input--textarea">

			
				<textarea required></textarea>


			
			
		</span>
	
	</label>
	<label class="o-forms-field o-forms-field--inline">
		
		<span class="o-forms-title o-forms-title--shrink">
			<span class="o-forms-title__main">Shrunken title</span>
			<span class="o-forms-title__prompt">A prompt can go here</span>
		</span>

		<span class="o-forms-input o-forms-input--textarea">

			
				<textarea required></textarea>


			
			
		</span>
	
	</label>

Select boxes

Dropdown/Selection inputs

<label class="o-forms-field o-forms-field--optional">
		
		<span class="o-forms-title">
			<span class="o-forms-title__main">Default select box</span>
			<span class="o-forms-title__prompt">Optional prompt/description text</span>
		</span>

		<span class="o-forms-input o-forms-input--select">

			

				<select>
					<option value="Option 1 (low chars: qgjpy)" selected>Option 1 (low chars: qgjpy)</option>
					<option value="Option 2">Option 2</option><option value="Option 3">Option 3</option><option value="Option 4">Option 4</option>
				</select>

			
			
		</span>
	
	</label>
	<label class="o-forms-field">
		
		<span class="o-forms-title">
			<span class="o-forms-title__main">Valid selection</span>
			
		</span>

		<span class="o-forms-input o-forms-input--select o-forms-input--valid">

			

				<select required>
					<option value="Option 1" selected>Option 1</option>
					<option value="Option 2">Option 2</option><option value="Option 3">Option 3</option><option value="Option 4">Option 4</option>
				</select>

			
			
		</span>
	
	</label>
	<label class="o-forms-field">
		
		<span class="o-forms-title">
			<span class="o-forms-title__main">Invalid selection</span>
			
		</span>

		<span class="o-forms-input o-forms-input--select o-forms-input--invalid">

			

				<select required>
					
					<option value=""></option><option value="Option 1">Option 1</option><option value="Option 2">Option 2</option><option value="Option 3">Option 3</option>
				</select>

			<span class="o-forms-input__error">Please select an option</span>
			
		</span>
	
	</label>
	<label class="o-forms-field">
		
		<span class="o-forms-title">
			<span class="o-forms-title__main">Disabled select box</span>
			
		</span>

		<span class="o-forms-input o-forms-input--select">

			

				<select disabled>
					<option value="Option 1" selected>Option 1</option>
					<option value="Option 2">Option 2</option><option value="Option 3">Option 3</option><option value="Option 4">Option 4</option>
				</select>

			
			
		</span>
	
	</label>
	<label class="o-forms-field">
		
		<span class="o-forms-title">
			<span class="o-forms-title__main">Small select box</span>
			
		</span>

		<span class="o-forms-input o-forms-input--select o-forms-input--small">

			

				<select required>
					<option value="Option 1" selected>Option 1</option>
					<option value="Option 2">Option 2</option><option value="Option 3">Option 3</option><option value="Option 4">Option 4</option>
				</select>

			
			
		</span>
	
	</label>
	<label class="o-forms-field">
		
		<span class="o-forms-title">
			<span class="o-forms-title__main">Multiple select box</span>
			
		</span>

		<span class="o-forms-input o-forms-input--select">

			

				<select multiple required>
					<option value="Option 1" selected>Option 1</option>
					<option value="Option 2">Option 2</option><option value="Option 3">Option 3</option><option value="Option 4">Option 4</option>
				</select>

			
			
		</span>
	
	</label>
	<label class="o-forms-field">
		
		<span class="o-forms-title">
			<span class="o-forms-title__main">Select box with suffix</span>
			<span class="o-forms-title__prompt">And prompt text for good measure</span>
		</span>

		<span class="o-forms-input o-forms-input--select o-forms-input--suffix">

			

				<select required>
					<option value="Option 1" selected>Option 1</option>
					<option value="Option 2">Option 2</option><option value="Option 3">Option 3</option><option value="Option 4">Option 4</option>
				</select>

			
			<button class="o-buttons o-buttons--big">Go</button>
		</span>
	
	</label>
	<label class="o-forms-field">
		
		<span class="o-forms-title">
			<span class="o-forms-title__main">Small select box with suffix</span>
			
		</span>

		<span class="o-forms-input o-forms-input--select o-forms-input--suffix o-forms-input--small">

			

				<select required>
					<option value="Option 1" selected>Option 1</option>
					<option value="Option 2">Option 2</option><option value="Option 3">Option 3</option><option value="Option 4">Option 4</option>
				</select>

			
			<button class="o-buttons">Go</button>
		</span>
	
	</label>
	<label class="o-forms-field o-forms-field--inline">
		
		<span class="o-forms-title o-forms-title--shrink">
			<span class="o-forms-title__main">Short title</span>
			<span class="o-forms-title__prompt">Long input</span>
		</span>

		<span class="o-forms-input o-forms-input--select">

			

				<select required>
					<option value="Option 1" selected>Option 1</option>
					<option value="Option 2">Option 2</option><option value="Option 3">Option 3</option><option value="Option 4">Option 4</option>
				</select>

			
			
		</span>
	
	</label>
	<label class="o-forms-field o-forms-field--inline">
		
		<span class="o-forms-title o-forms-title--vertical-center">
			<span class="o-forms-title__main">Vertically centered title</span>
			
		</span>

		<span class="o-forms-input o-forms-input--select">

			

				<select required>
					<option value="Option 1" selected>Option 1</option>
					<option value="Option 2">Option 2</option><option value="Option 3">Option 3</option><option value="Option 4">Option 4</option>
				</select>

			
			
		</span>
	
	</label>
	<label class="o-forms-field o-forms-field--inline">
		
		<span class="o-forms-title">
			<span class="o-forms-title__main">Inline multiple selectbox</span>
			<span class="o-forms-title__prompt">Multiple select boxes can also be inlined.</span>
		</span>

		<span class="o-forms-input o-forms-input--select">

			

				<select multiple required>
					<option value="Option 1" selected>Option 1</option>
					<option value="Option 2">Option 2</option><option value="Option 3">Option 3</option><option value="Option 4">Option 4</option>
				</select>

			
			
		</span>
	
	</label>
Switch component view

GitHub Repository

Install o-forms

If using the Build Service, add o-forms@^7.0.11 to your script and link tags.

If running a Manual Build, run bower install --save "o-forms@^7.0.11".

Help & Support

o-forms is maintained directly by the Origami team. If you have any questions about o-forms or Origami in general, we are happy to help. 😊

Slack: #ft-origami
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com