Split Button Form Control

Posted by Jeremy Gillick on 15 Mar 2009 12:28 am in Code & Technical

A split button element is a submit button with a built-in menu of actions. My goal was to create a split button form control that is both semantic and accessible.

Stylized controls, like this, should only be used when there is a solid reason to do so. In general the default browser controls work fine and provide a pattern that users are familiar with. For certain situations, however, it is useful to provide a simple way to choose a single action using stylized controls.

Split Button HTML


<script type="text/javascript" src="splitbutton.js"></script>

<p class="splitButton">
   <select name="actions" id="actions" title="Choose Action">
      <option>Send Message</option>
      <option>Flag</option>
      <option>Chug Pixie Stick</option>
   </select>
   <input type="submit" value="Go" />
</p>

This will create a split button with 3 options and the default button name will be “Choose Action” (see example above). The key elements here are:

  • A surrounding element with the splitButton class.
  • A select element with an optional title attribute.
  • A submit button.

If the select element has a title attribute, that text will be used as the default button name; otherwise, it will use the first (or selected) option as the button name.

When an action is selected the JavaScript will send a click event (via the click() function) to the submit button element in order submit the form.

The menu is also accessible with the keyboard. When you bring focus to control, the menu will open and you can use your arrows to select an option. Pressing ESC will close the menu.

Dependencies

This code uses YUI 2.6 with the Selector beta library and can easily be ported to jQuery or any other framework.

Download

Split button

Usage

You are free to download, modify and use this code anywhere you want. There are no restrictions.

Comments (4)

Add to: Del.icio.us | Digg it | Slashdot | Y! MyWeb