Contents
The idea is taken from alexking.org
Text label:
This is a paragraph. This is another paragraph. Your name is "E. Smith".
Text input (normal/focused):
[__________________] [I_________________]
Text area NG556:
|____________________| |____________________| |____________________| |____________________| |____________________|
Radio button:
(o) Selected ( ) Unselected
Checkboxes:
[x] Selected [ ] Unselected
Dropdown menu NG348:
[__________|v]
Buttons (enabled & disabled):
[ Cancel ] | Apply |
Button list NG476:
[ Button 1 ] [ Button 2 ] [ Button 3 ]
Button drop-down panel (normal) NG528:
[ Button v ]
Button drop-down panel (clicked) NG528:
[ Button v ] +--------------------+ | | | // panel contents | | | +--------------------+
Note
Panel contents can be buttons, links or any other widget.
Button set NG528:
[ Button 1 | Button 2 | Button 3 ]
Button set with upper limit (set to 1) NG528:
[ Main Action | v ]
Button set with upper limit (v is clicked) NG528:
[ Main Action | v ] +--------------------+ | Action 2 | | Action 3 | | Action 4 | +--------------------+
Basic Selector (multiple):
[x] Label1 [ ] Label2 [x] Label3 [x] Label4 [ ] Label5
Basic Selector (single):
( ) Label1 ( ) Label2 (o) Label3
Progress bar NG554:
[ ########## 50% __________ ]
Slider NG1242:
[ ----O-------------------- ] Value label
Tabs:
.-----------. .-----------. | Tab 1 | | Tab 2 | -+ +-+-----------+-----------...
Dialog:
+----------------------------------+ | Title X | +----------------------------------+ | | | Are you sure? | | | | [ Yes ] [ No ] | +----------------------------------+
Fieldset with/without label:
.Fieldset label ------------ | | ( ) Disabled | (o) Enabled | .-------------------------- | | ( ) Disabled | (o) Enabled |