The BootsFaces radiobutton give you more flexibility to design your page layout than the standard JSF radiobutton.
For the sake of compatibility, you can follow the traditional JSF approach using <f:selectItem />
or <f:selectItems />. But that only allows for very simple
layouts (the buttons are vertical, and no element except the label can be between the buttons). In particular,
you can't embed the radiobuttons in a multi-column Bootstrap grid. So BootsFaces offers a more flexible
version. The drawback is that you have to add an extra attribute defining which radio buttons belong together.
We chose the value value attribute for this. So you have to repeat the value attribute
with every option of the radio button in order to indicate which buttons belong to a common group:
Note that the radiobuttons are implemented as an HTML <div> tag, so by default, the radiobuttons are still stacked on each by default. That's why we wrapped them in a <b:panelGrid /> in the example above.
You can declare a radiobutton group mandatory by adding the attribute required="true"
to the first radiobutton. The label of the first radio button is used in the error message.
If you want to show a custom error message, use the attribute required-message.
Required inputs fields and their labels both bear the CSS class bf-required.
If the field has a FacesMessage, one of the CSS classes bf-info, bf-warning,
bf-error or bf-fatal, depending on which error severity the message has.
The latter two classes color the label red.
If there's no message, the field and its label bear the pseudo CSS classes bf-no-message
and has-success. The latter colors the label green by default.
For the sake of convenience and back-ward compatibility, BootsFaces also supports the traditional
JSF API using <f:selectItem />. Of course, you loose a lot of flexibility.
The radiobuttons are stacked on top of each other, and the only way to change this is using
clever CSS tricks.
<f:selectItems /> allows you to generate the radio buttons from a list or a map. You can
use the attribute itemDisabled="true" to disable individual items within this list.
Since BootsFaces 1.1.0, radio buttons also support AJAX. More precisely, it supports the click event. The attribute
update must be repeated for each radio button of the radio button group.
However, you can't define different update areas for each radio button. The first radiobutton decides which method is called
and which part of the page is updated.
| Attribute | Default value | Description |
|---|---|---|
| ajax | false | Whether the Button submits the form with AJAX. |
| auto-update autoUpdate (alternative writing) |
false | Setting this flag updates the widget on every AJAX request. |
| col-lg colLg (alternative writing) |
-1 | Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| col-md colMd (alternative writing) |
-1 | Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| col-sm colSm (alternative writing) |
-1 | Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| col-xs colXs (alternative writing) |
-1 | Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| delay | (none) | Delays the AJAX request. |
| dir | (none) | Direction indication for text that does not inherit directionality. Legal values: ltr (Default. Left-to-right text direction), rtl (Right-to-left text direction) and auto (let the browser figure out the direction of your alphabet, based on the page content). |
| disabled | false | Boolean value to specify if the button is disabled. |
| display | block | If you use the "visible" attribute, the value of this attribute is added. Legal values: block, inline, inline-block. Default: block. |
| hidden | (none) | This column is hidden on a certain screen size and below. Legal values: lg, md, sm, xs. |
| id | (none) | Unique identifier of the component in a namingContainer. |
| immediate | false | Flag indicating that, if this component is activated by the user, notifications should be delivered to interested listeners and actions immediately (that is, during Apply Request Values phase) rather than waiting until Invoke Application phase. Default is false. |
| item-label itemLabel (alternative writing) |
(none) | The caption of the radio button. Alternatively you can use arbitrary captions by embedding them as child elements of the b:radiobutton. As a third alternative, you can follow the traditional JSF approach using <f:f:selectItem /> or <f:selectItems />. |
| item-value itemValue (alternative writing) |
(none) | Value of the item. Must be omitted if you use the traditional JSF approach using <f:selectItem /> or <f:selectItems />. |
| large-screen largeScreen (alternative writing) |
-1 | Alternative spelling to col-lg. Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| medium-screen mediumScreen (alternative writing) |
-1 | Alternative spelling to col-md. Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| offset | (none) | Integer value to specify how many columns to offset. |
| offset-lg offsetLg (alternative writing) |
(none) | Integer value to specify how many columns to offset. |
| offset-md offsetMd (alternative writing) |
(none) | Integer value to specify how many columns to offset. |
| offset-sm offsetSm (alternative writing) |
(none) | Integer value to specify how many columns to offset. |
| offset-xs offsetXs (alternative writing) |
(none) | Integer value to specify how many columns to offset. |
| onclick | (none) | The onclick attribute. |
| oncomplete | (none) | JavaScript to be executed when ajax completes. |
| onerror | (none) | JavaScript to be executed when ajax results on an error (including both network errors and Java exceptions). |
| onsuccess | (none) | JavaScript to be executed when ajax completes with success (i.e. there's neither a network error nor a Java exception). |
| process | (none) | Comma or space separated list of ids or search expressions denoting which values are to be sent to the server. |
| rendered | false | Boolean value to specify the rendering of the component, when set to false the component will not be rendered. |
| required | false | Boolean value Require input in the component when the form is submitted. |
| required-message requiredMessage (alternative writing) |
(none) | Message to show if the user did not specify a value and the attribute required is set to true. |
| small-screen smallScreen (alternative writing) |
-1 | Alternative spelling to col-sm. Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| span | (none) | Integer value to specify how many columns to span on medium screens (≥992 pixels). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| style | (none) | Inline style of the input element. |
| style-class styleClass (alternative writing) |
(none) | Style class of this element. |
| tiny-screen tinyScreen (alternative writing) |
-1 | Alternative spelling to col-xs. Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| tooltip | (none) | The text of the tooltip. |
| tooltip-container tooltipContainer (alternative writing) |
body | Where is the tooltip div generated? That's primarily a technical value that can be used to fix rendering errors in special cases. Also see data-container in the documentation of Bootstrap. The default value is body. |
| tooltip-delay tooltipDelay (alternative writing) |
0 | The tooltip is shown and hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay). |
| tooltip-delay-hide tooltipDelayHide (alternative writing) |
0 | The tooltip is hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay). |
| tooltip-delay-show tooltipDelayShow (alternative writing) |
0 | The tooltip is shown with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay). |
| tooltip-position tooltipPosition (alternative writing) |
(none) | Where is the tooltip to be displayed? Possible values: "top", "bottom", "right", "left", "auto", "auto top", "auto bottom", "auto right" and "auto left". Default to "bottom". |
| update | (none) | Component(s) to be updated with ajax. |
| value | (none) | EL expression denoting the property of the backend bean. This expression is also used to determine which radiobuttons belong together. |
| visible | (none) | This column is shown on a certain screen size and above. Legal values: lg, md, sm, xs. |