Form
Provides styling and behavior for form controls and error messages.
Assign data-ts="Form"
to a form
to initialize as a Form.
Form components depend on specific internal element structure in order to initialize and style their contents. Most components adhere to this structure:
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 theselect
- 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…