Text Inputs, Checkboxes, and Radio Buttons

This is a blog post about the design of EmberUI. Haven’t heard about EmberUI? Read an introduction.

Text Inputs

Similar to the design of the button, there are several different states to make the text input control feel native and a pleasure to use.

They also come in the same three sizes so you can combine the buttons and inputs and have it look great.

The inputs do have something new about them: error handling. When a input is in an error state it will highlight itself in red. If you supply a message with the error it will also display that in a bubble below the text input.

Built on top of this base text input there are several other inputs that are tailored to specific data types.Right now these are:

• Date
• Expiry Date
• Credit Card
• Password
• Search
• Money
• Email
• URL

Each of these inputs will have built in validation methods so you don’t need to write your own validation code. For example, the date fields allows you to specify if you require the date to be in the past, future, or either. It will then validate the data and throw an error if it is incorrect.

Email and URL inputs not pictured.

There are several HTML5 inputs not on this list, and at some point they will make an appearance, but for now I think as a starting point these are probably the most useful ones.

I am also not convinced some of the HTML5 inputs such as the datetime and datetime-local are even a good idea.They have pretty brutal usability issues and can probably be better accomplished through the use of multiple inputs.

Checkboxes

The focus with checkboxes will be to make them easier to work with. Styling and positioning the standard form element consistently across browsers can be quite painful.

The only noteworthy feature addition is the ability to specify a label for the checkbox and it will show up to the right of the checkbox.

Radio buttons

Radio buttons will not be supported by EmberUI. They provide very bad usability and modern applications should not make use of them . Use a select box or custom control instead.

The PSDs for these designs are available on Github under an MIT license. Feel free to use them as you see fit.

Code will come soon.