The shuttlelist component can be created with `<tc:selectManyShuttle/>`. In general, the height of the list depends on the number of items and is set to an amount, where no scrollbar is needed. You can set the number of rows with the `size` attribute. The shuttle list has at least seven rows, values less than seven have no effect. Items are added via `<tc:selectItem>` (static) or `<tc:selectItems>` (dynamic).

Tag Library Documentation: | |

<tc:selectManyShuttle label="Shuttle List" size="7">

After a submit, the entries in the right list are shown in the output field with name and distance from the sun.

A label is added to the left list via the `unselectedLabel` attribute and to the right list via `selectedLabel`. The label for the whole component is set on top by `labelLayout="top"`.

In this example, the entries are added by `<tc:selectItems ... var="planet" itemLabel="\#{planet.name}" itemValue="\#{planet}"/>`. The name of a variable is defined by`var`. In this case, the `itemLabel` get the name of the planet, while the `itemValue` is object itself.

<tc:selectManyShuttle label="Planets" ...> <tc:selectItems value="\#{selectManyShuttleController.planets}" .../> </tc:selectManyShuttle>

The entries in the right list are shown in `<tc:out id="outputStars" .../>`. `<tc:selectManyShuttle .../>` contain `<f:ajax render="outputStars"/>`. Every time, the value in the shuttle list change, the output field is rerendered.