Disabled and readonly fields

Form fields can be set to be disabled or readonly the same way you would in (X)HTML(5). You can set data-ts.preview attribute to preview whole form.

input type="text" disabled

<form data-ts="Form">
	<fieldset>
		<label>
			<span>Disabled Text</span>
			<input type="text" disabled/>
		</label>
	</fieldset>
</form>

input type="text" readonly

<form data-ts="Form">
	<fieldset>
		<label>
			<span>Readonly Text</span>
			<input type="text" readonly/>
		</label>
	</fieldset>
</form>

textarea disabled

<form data-ts="Form">
	<fieldset>
		<label>
			<span>Disabled Textarea</span>
			<textarea disabled>Fatback kevin picanha pork loin kielbasa, turducken doner. Beef ribs tongue ham, ball tip hamburger pork loin biltong sausage salami sirloin tenderloin kevin shank pig meatloaf.</textarea>
		</label>
	</fieldset>
</form>

date disabled

<form data-ts="Form">
<fieldset>
	<label>
		<span>Disabled Date</span>
			<input type="date"
				value="2015-01-01"
				min="2014-01-01"
				max="2016-01-01"
				disabled/>
	</label>
</fieldset>
</form>

select disabled

<form data-ts="Form">
<fieldset>
	<label>
		<span>Disabled Select</span>
		<select disabled>
			<option value="a" selected>One</option>
			<option value="b">Two</option>
			<option value="c">Three</option>
			<option value="d">Four</option>
			<option value="e">Five</option>
		</select>
	</label>
</fieldset>
</form>

input type="radio" disabled

<form data-ts="Form">
	<fieldset>
		<span>There is no choice</span>
		<label>
			<input type="radio" name="radio" checked disabled/>
			<span>Red pill</span>
		</label>
		<label>
			<input type="radio" name="radio" disabled/>
			<span>Blue pill</span>
		</label>
	</fieldset>
</form>

input type="checkbox" disabled

<form data-ts="Form">
	<fieldset>
		<span>By browsing this page you agree to our terms</span>
		<label>
			<input type="checkbox" disabled/>
			<span>I agree to something</span>
		</label>
		<label>
			<input type="checkbox" checked disabled/>
			<span>I agree to something (by default)</span>
		</label>
	</fieldset>
</form>

input type="checkbox" disabled (alternate version)

<form data-ts="Form">
	<fieldset>
		<span>It's not a bug, it's a feature!</span>
		<label>
			<span>Secret Feature</span>
			<input type="checkbox" disabled/>
		</label>
		<label>
			<span>Secret Feature (On by default)</span>
			<input type="checkbox" checked disabled/>
		</label>
	</fieldset>
</form>

form data-ts.preview="true"

<form data-ts="Form" data-ts.preview="true">
	<fieldset>
		<label>
			<input type="text" value="preview form"/>
		</label>
	</fieldset>
</form>