Design Pattern: Listbox

A listbox is a box containing a list. We use listbox to show more than one index on a page. Listboxes can be list items and they can nest, but they don't have to. They can be expandable, draggable and sortable. You can have a single listbox on a page so long as that page could show multiple indexes with enough user data; they don't need to be logicked out.

The present listbox style is declared in listbox.css. It's a group.

Listbox HTML Structure

Quick Ref: [always] {sometimes}

[listbox]
	[heading] {span actions}[/heading]
	{p note}{/p} {ul actions} {div form}
	[index]
		{listbox}...{/listbox}
	[/index]
	{p note} {ul actions}
[/listbox]

Rules

A listbox can be any block container that can contain these blocks: h1—6, p, div, ul, ol, dl. So this means a listbox could be a:

• fieldset.listbox
• div.listbox
• li.listbox
• dd.listbox
• td.listbox (not recommended)
• form.listbox (not recommended)

You can never have an inline listbox of any kind. You can never have a listbox with restricted children: no table.listbox, ol, ul, or dl.listbox

Listbox XHTML Diagram (example)

1. <div class="works listbox">
   1. <h3 class="heading">Recent Works
      1. <span class="action">
         1. <a class="open">↓</a>
         </span>
      </h3>
   2. <ul class="index">
      1. <li class="work blurb">...</li>
      2. <li class="work blurb">...</li>
   3. <p class="actions">Show All</p>

Notes

We call it listbox (instead of indexbox) because a listbox might be a dynamically inserted form or form component, and therefore would need managed focus. This seems most closely related to the ARIA role listbox.

At the moment there are no listboxes in the codebase with the role listbox.

Back

Return to the documentation index.