Switches are very simple input widgets for binary choices. They are particularly useful for mobile devices.
<b:switch> makes the Bootstrap style of displaying switches available to JSF programmers.
The <b:switch /> uses the unified AJAX API of BootsFaces. However, you should avoid to use the onclick event because
it's triggered too early. Use onchange instead.
If the field has a FacesMessage, one of the CSS classes bf-info, bf-warning,
bf-error or bf-fatal is added to the label, depending on which error severity the message has.
The latter two classes color the label red. bf-warning colors it orange. You can override this default setting in a custom CSS file.
If there's no message,
the field and its label bear the pseudo CSS class bf-no-message and has-success. The latter colors the label green by default.
You can use all the attributes controlling the responsive behaviour of <b:column />
also with <b:switch />:
You can play also with col-*-*, visible and hidden attribute, as any bootstrap elements. For example:
| Attribute | Default value | Description |
|---|---|---|
| accesskey | (none) | Access key to transfer focus to the input element. |
| ajax | false | Whether the Button submits the form with AJAX. |
| alt | (none) | Alternate textual description of the input element. |
| animate | false | Animate the switch. Default value: true. |
| auto-update autoUpdate (alternative writing) |
false | Setting this flag updates the widget on every AJAX request. |
| binding | (none) | An EL expression referring to a server side UIComponent instance in a backing bean. |
| caption | (none) | Caption of the check box (text behind the check box, as opposed to the label, which may be above the check box) |
| 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. |
| converter | (none) | An EL expression or a literal text that defines a converter for the component. When it's an EL expression, it's resolved to a converter instance. In case it's a static text, it must refer to a converter id. |
| converter-message converterMessage (alternative writing) |
(none) | Message to display when conversion fails. |
| 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 | Disables the input element, default is false. |
| disabled | false | Is the switch disabled? Default value: false. |
| display | block | If you use the "visible" attribute, the value of this attribute is added. Legal values: block, inline, inline-block. Default: block. |
| field-size fieldSize (alternative writing) |
(none) | The size of the input. Possible values are xs (extra small), sm (small), md (medium) and lg (large) . |
| handle-width handleWidth (alternative writing) |
0 | Width of the left and right sides in pixels. |
| 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. |
| indeterminate | false | Indeterminate state. Turned off by default. |
| inverse | false | Inverse switch direction. Default value: false |
| label | (none) | The label above of the field . |
| label-style labelStyle (alternative writing) |
(none) | The CSS inline style of the label. |
| label-style-class labelStyleClass (alternative writing) |
(none) | The CSS class of the label. |
| label-text labelText (alternative writing) |
(none) | Text of the center handle of the switch. Default value: a space (nbsp). |
| label-width labelWidth (alternative writing) |
0 | Width of the center handle in pixels. |
| lang | (none) | Code describing the language used in the generated markup for this component. |
| 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. |
| off-color offColor (alternative writing) |
(none) | Color of the right hand side of the switch. Legal values: 'primary', 'info', 'success', 'warning', 'danger', 'default'. Default value: 'primary'. |
| off-text offText (alternative writing) |
(none) | Optional label of the inactive switch. The default value is 'off'. |
| 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. |
| on-color onColor (alternative writing) |
(none) | Color of the left hand side of the switch. Legal values: 'primary', 'info', 'success', 'warning', 'danger', 'default'. Default value: 'primary'. |
| on-text onText (alternative writing) |
(none) | Optional label of the active switch. The default value is 'on'. |
| onblur | (none) | Client side callback to execute when input element loses focus. |
| onchange | (none) | Client side callback to execute when input element loses focus and its value has been modified since gaining focus. |
| onclick | (none) | OnClick DHTML event . |
| onclick | (none) | The onclick attribute. |
| oncomplete | (none) | JavaScript to be executed when ajax completes. |
| ondblclick | (none) | Client side callback to execute when input element is double clicked. |
| onerror | (none) | JavaScript to be executed when ajax results on an error (including both network errors and Java exceptions). |
| onfocus | (none) | Client side callback to execute when input element receives focus. |
| onkeydown | (none) | Client side callback to execute when a key is pressed down over input element. |
| onkeypress | (none) | Client side callback to execute when a key is pressed and released over input element. |
| onkeyup | (none) | Client side callback to execute when a key is released over input element. |
| onmousedown | (none) | Client side callback to execute when a pointer input element is pressed down over input element. |
| onmousemove | (none) | Client side callback to execute when a pointer input element is moved within input element. |
| onmouseout | (none) | Client side callback to execute when a pointer input element is moved away from input element. |
| onmouseover | (none) | Client side callback to execute when a pointer input element is moved onto input element. |
| onmouseup | (none) | Client side callback to execute when a pointer input element is released over input element. |
| onselect | (none) | Client side callback to execute when text within input element is selected by user. |
| 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. |
| readonly | false | Flag indicating that this input element will prevent changes by the user. |
| readonly | false | Is the switch readonly? Default value: false. |
| render-label renderLabel (alternative writing) |
net.bootsfaces.component.ComponentUtils.isRenderLabelDefault() | Allows you to suppress automatic rendering of labels. Used internally by AngularFaces, too. |
| rendered | false | Boolean value to specify the rendering of the component, when set to false the component will not be rendered. |
| 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 the input element. |
| switchsize | (none) | The checkbox size. Legal values: null, 'mini', 'small', 'normal', 'large'. Default value: 'null'. |
| tabindex | (none) | Advisory tooltip information. |
| 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. |
| title | (none) | Advisory tooltip information. |
| 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 referring to the back-end bean attribute providing the value of the field. |
| value-change-listener valueChangeListener (alternative writing) |
(none) | A method binding expression referring to a method for handling a valuechangeevent. |
| visible | (none) | This column is shown on a certain screen size and above. Legal values: lg, md, sm, xs. |
The entire switch (including label and caption) is enclosed in a
div
bearing the CSS-class
checkbox
.