Blog

Wired Elements, a set of hand-drawn UI elements, part 3 (textarea, slider, tooltip, radio & toggle)

By  
Binh Bui
Binh Bui
·
On Aug 15, 2018 6:00:00 AM
·
In
Web Components Wednesday (WCW) blog series is created for two purposes: introducing easy-to-use components and educating people on the concept of Web Components. All the WCW blogs can be found here.

This blog post is the final part of the series “Wired Elements collection.” In this part, we are going to feature the rest of the set: wired-textarea, wired-slider, wired-tooltip, wired-radio, wired-radio-group & wired-toggle. Let’s dig in!

Wired-textarea

First, we have wired-textarea. The component makes use of the native textarea with its attributes. You can customize the number of rows, the minimum and maximum length of characters and give it a placeholder. For extra styling, the font and area inside may also be configured using regularules.

DemoComponent

Wired-slider

Just like wired-progress, wired-slider has a default minimum and maximum value of 0 and 100, respectively. Those numbers, as well as the knob radius & color, can be changed using the element’s attributes and CSS custom properties. You can either use an arrow key or drag to modify the value, however, clicking on the bar does not do the job. As always, check out the demo for more instructions on usage.

DemoComponent

Wired-tooltip

Wired-tooltip is a neat tool to show additional information to your users. However, you need to understand how to place it. By default, it will be centered to either an anchor element specified in the for attribute, or, if that doesn't exist, centered to the parent node containing it. So, get a good knowledge of the box model, and you will handle this with ease. Additionally, the text, offset and appearing position can all be customized.

DemoComponent

Wired-radio

Have you ever wondered why they are called “radio”? That’s because they represent choices people can choose, just like push buttons on old-fashioned radios. Wired-radio provides attributes for altering the displayed text, icon size, checked status and some CSS properties for coloring. Are you looking for a form-like group of radio buttons instead? Check the component below.

DemoComponent

Wired-radio-group

Wired-radio-group is a collection of wired-radio buttons, which are designed for getting only one option out of the group. This component is highly suitable for form questions, with the limit to one choice. You can have as many wired-radio(s) in one group as you like.

DemoComponent

Wired-toggle

Wired-toggle is a funky toggle, and you can modify its on-off colors freely. It has only two attributes, checked and disabled.

DemoComponent

Compatibility table

The table below will shortly summarize the components’ info and compatibility on multiple platforms. None of the components are functioning properly in IE11.

Component

Library

Mobile

Browsers

wired-textarea

lit-element^0.5.2

C,S,O,F,E

wired-slider

lit-element^0.5.2

C,S,O,F,E

wired-tooltip

lit-element^0.5.2

C,S,O,F,E

wired-radio

lit-element^0.5.2

C,S,O,F,E

wired-radio-group

lit-element^0.5.2

C,S,O,F,E

wired-toggle

lit-element^0.5.2

C,S,O,F,E

Final words

This is the end of the series “Wired Elements”. We hope that after getting to know these components, you can make great mockups and wireframes.

Click here for more awesome web components

Relevant articles:

Binh Bui
Binh Bui
Binh is a Growth Marketer involved with multiple domains ranging from running experiments, campaigns to doing product-led growth stuff. He likes using his brain and he likes random discussions. Out of work, you can see Binh in the Schrodinger gym. Follow Binh on Twitter @buibaobin
Other posts by Binh Bui