How to change the radio button or checkbox layout

Question

We use h:selectManyCheckbox and h:selectOneRadio for rendering choices against a certain element. We would like the flexibility to layout the choices either horizontally, vertically or sorted in multiple columns.

e.g. 
1. Horizontally
one two three four five six

2. Vertically
one 
two
three
four
five
six

3. 2 columns
one two
three four
five six

4. 3 columns
one two three
four five six

How do we accomplish this either using the existing jsf tags or with suitable changes.

Answer 1

1. First, be clear in what you want...
2. Take a look at: Developing a custom JSF tag
3. Know what attributes you can pass in your new custom tag, example (<h:customRadioButtons list="arraylist" style="table" name="rbuttons" columns="2" />)
4. Develope your future customTag...

Answer 2

You can try to use from apache tomahawk library with layoutWidth property. Or create your own JSF component

Answer 3

You can make facelate for this and customize your layout by using and bind with Mybean containing id, value, checked....

Answer 4

using tomahawk ,we can try use layout="spread" like:

 <t:selectOneRadio id="test" value="one" layout="spread" border="1">
    <f:selectItem itemLabel="one" itemValue="one" />
    <f:selectItem itemLabel="two" itemValue="two" />
    <f:selectItem itemLabel="three" itemValue="three" />
    <f:selectItem itemLabel="four" itemValue="four" />
    <f:selectItem itemLabel="five" itemValue="five" />      
  </t:selectOneRadio>
  <t:panelGrid columns="2">
    <t:radio for="test" index="0"></t:radio>
    <t:radio for="test" index="1"></t:radio>
  </t:panelGrid>
  <t:panelGrid columns="3">
    <t:radio for="test" index="2"></t:radio>                
    <t:radio for="test" index="3"></t:radio>
    <t:radio for="test" index="4"></t:radio>
  </t:panelGrid>

then use ajax to rerender this t:selectOneRadio to change to other layout.