Form
Provides styling and behavior for form controls and error messages.
Assign data-ts="Form" to a form to initialize as a Form.
<form data-ts="Form"> ... </form>
Form components depend on specific internal element structure in order to initialize and style their contents. Most components adhere to this structure:
<form data-ts="Form">
<fieldset>
<label>
<span> ... </span>
<input/>
</label>
</fieldset>
</form>
textarea
Starts out with three lines, but will expand up to ten as content is entered. The rows attribute can be used to adjust the initial amount of lines to show.
<form data-ts="Form">
<fieldset>
<label>
<span>Textarea</span>
<textarea></textarea>
</label>
</fieldset>
</form>
You can specify type="submit" to make the texarea submit the form on ENTER. In this mode, newlines may still be entered while pressing the SHIFT key.
<form data-ts="Form" action="javascript:alert('Form submitted')">
<fieldset>
<label>
<span>Press SHIFT to ENTER newlines</span>
<textarea rows="1" type="submit"></textarea>
</label>
</fieldset>
</form>
input
type="text"
<form data-ts="Form">
<fieldset>
<label>
<span>Text</span>
<input type="text" required/>
</label>
</fieldset>
</form>
input
type="tel"
<form data-ts="Form">
<fieldset>
<label>
<span>Tel</span>
<input type="tel" required/>
</label>
</fieldset>
</form>
input
type="email"
<form data-ts="Form">
<fieldset>
<label>
<span>Email</span>
<input type="email" required/>
</label>
</fieldset>
</form>
input
type="number"
Set the class class="ts-right" on the label to make your number text align right.
<form data-ts="Form">
<fieldset>
<label>
<span>Number</span>
<input type="number"/>
</label>
</fieldset>
</form>
input
type="date"
<form data-ts="Form">
<fieldset>
<label>
<span>Date</span>
<input type="date"
value="2015-01-01"
min="2014-01-01"
max="2016-01-01"/>
</label>
</fieldset>
</form>
select
The select will open in an Aside, but you'll
mantain it like a normal select.
Note that the select only triggers a
change event when the Aside is fully closed!
Set the attribute data-ts.custom="true" to handle your own select event.
<form data-ts="Form">
<fieldset>
<label>
<span>Select</span>
<select>
<option value="a" selected>One</option>
<option value="b">Two</option>
<option value="c">Three</option>
</select>
</label>
</fieldset>
</form>
You can configure the select with a default placeholder in a two-step process.
- Add the
placeholderattribute to theselect - Leave the first
optionempty (no option text)
<form data-ts="Form">
<fieldset>
<label>
<span>Select with placeholder</span>
<select placeholder="Pick a number">
<option></option>
<option value="5">5</option>
<option value="23">23</option>
</select>
</label>
</fieldset>
</form>
When a selection is made, the user can revert to the default (no selection) by clicking the selected option a second time. If you don't want to allow this, you should make sure to remove the empty option.
This strange pattern ensures maximum compatibility with Angular 1.x, where an empty option is automatically inserted until a selection is performed. To also allow unselection in Angular, you must manually create the empty option and make sure that it is explicitly selected as default.
select
multiple
The select multiple only triggers a change when the Done button is pressed. You can customize the button label by adding a button to the label element, but note that this only configures the text on the button (eg. no event listeners are fired).
<form data-ts="Form">
<fieldset>
<label>
<span>Select multiple</span>
<select multiple id="multijohn">
<option value="a">One</option>
<option value="b">Two</option>
<option value="c">Three</option>
<option value="d">Four</option>
<option value="e">Five</option>
</select>
<button>Cool, apply changes!</button>
</label>
</fieldset>
</form>
input
type="radio"
Radio element. Generally used to choose something.
<form data-ts="Form">
<fieldset>
<span>Choose wisely</span>
<label>
<input type="radio" name="radio" checked/>
<span>Red pill</span>
</label>
<label>
<input type="radio" name="radio"/>
<span>Blue pill</span>
</label>
</fieldset>
</form>
input
type="checkbox"
Checkbox element. Generally used to indicate consent on forms.
<form data-ts="Form">
<fieldset>
<span>Legally Binding Contract</span>
<label>
<input type="checkbox"/>
<span>I agree to something</span>
</label>
<label>
<input type="checkbox" checked/>
<span>I agree to something (by default)</span>
</label>
</fieldset>
</form>
input
type="textbox"
(alternate version)
We call it the switch. Used mainly for toggling preferences/settings. Note that switch differs from the checkbox only by the order of HTML elements.
<form data-ts="Form">
<fieldset>
<span>Settings Page</span>
<label>
<span>Secret Feature</span>
<input type="checkbox"/>
</label>
<label>
<span>Secret Feature (On by default)</span>
<input type="checkbox" checked/>
</label>
</fieldset>
</form>
Errors and info
To mark a control as invalid, simply add the class ts-error to the label.
<form data-ts="Form">
<fieldset>
<label class="ts-error">
<span>Text</span>
<input type="text"/>
</label>
</fieldset>
</form>
To display an error message, one must mark the control as errored using the ts-error class, as well as add the error message markup to the page.
<form data-ts="Form">
<fieldset>
<label class="ts-error">
<span>Text</span>
<input type="text" />
</label>
<dl class="ts-errors">
<dt>Text</dt>
<dd>An explanation of the error in question</dd>
<dd>Another explanation of the error in question</dd>
</dl>
</fieldset>
</form>
To display an info section, use the ts-info class.
<form data-ts="Form">
<fieldset>
<label>
<span>Text</span>
<input type="text" />
</label>
<dl class="ts-info">
<dt>Text</dt>
<dd>An information about the field</dd>
<dd>Another information about the field</dd>
</dl>
</fieldset>
</form>