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.

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.

input type="text"

input type="tel"

input type="email"

input type="number"

Set the class class="ts-right" on the label to make your number text align right.

input type="date"

input required

The input with attribute required will add a red asterisk to the first span in the label, so it is important to keep the markup structure as presented in the example below. Should work with all types of inputs.

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.

You can configure the select with a default placeholder in a two-step process.

  • Add the placeholder attribute to the select
  • Leave the first option empty (no option text)

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).

input type="radio"

Radio element. Generally used to choose something.

input type="checkbox"

Checkbox element. Generally used to indicate consent on forms.

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.

Errors and info

To mark a control as invalid, simply add the class ts-error to the label.

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.

To display an info section, use the ts-info class.

If you find a bug or need a feature…

  • Create GitHub Issue…