Working with Forms

The Oracle JET framework includes classes to create responsive form layouts and components that you can add to your form to manage labels, form validation and messaging, input, and selection. The input components also include attributes to mark an input as disabled or read only when appropriate.

The Oracle JET Cookbook and JavaScript API Reference for Oracle® JavaScript Extension Toolkit (JET) include complete demos and examples for using forms, and you may also find the following tips and tricks helpful.

Topics:

Working with Checkbox and Radio Sets

The Oracle JET ojCheckboxset component enhances a group of HTML input elements with type=checkbox, and the ojRadioset component enhances a group of input elements with type=radio.

The ojCheckboxset and ojRadioset components manage the selected value of their group and add required validation. In addition, the components manage the styles of the input elements, adding and removing the Oracle JET styles depending upon state.

To create the ojCheckboxset or ojRadioset, add the DOM element that will contain the group of input elements and use the ojComponent binding to create the component. The initial value of the checkbox or radio button is defined in the component's value option. The following code example shows the markup that defines the ojCheckboxset shown in the image above.

<form id="formId">
  <label id="mainlabelid">Colors</label>
  <!-- You must set the aria-labelledby attribute to make this accessible.
       role="group" is set for you by ojCheckboxset. -->
  <div id="checkboxSetId" aria-labelledby="mainlabelid"
       data-bind="ojComponent: {component: 'ojCheckboxset', value: currentColor}">
    <span class="oj-choice-item">
      <input id="blueopt" type="checkbox" name="rbb" value="blue">
      <label for="blueopt">Blue</label>
    </span>
    <span class="oj-choice-item">
      <input id="greenopt" type="checkbox" name="rbb" value="green">
      <label for="greenopt">Green</label>
    </span>
    <span class="oj-choice-item">
      <input id="redopt" type="checkbox" name="rbb" value="red">
      <label for="redopt">Red</label>
    </span>
    <span class="oj-choice-item">
      <input id="limeopt" type="checkbox" name="rbb" value="lime">
      <label for="limeopt">Lime</label>
    </span>
    <span class="oj-choice-item">
      <input id="aquaopt" type="checkbox" name="rbb" value="aqua">
      <label for="aquaopt">Aqua</label>
    </span>
  </div>
</form>

Note:

For accessibility, the ojCheckboxset and ojRadioset components require that you set the aria-labelledby attribute on the DOM element containing the component. You must also set each input element's id attribute, and refer to that id in the input label's for attribute. For additional information about creating accessible Oracle JET components, see Using the Accessibility Features of Oracle JET Components.

The code that defines the currentColor value is defined in the checkboxsetModel() function, shown below.

require(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'ojs/ojbutton', 'ojs/ojcheckboxset'],
  function(oj, ko, $)
  {
    function checkboxsetModel()
    {
      var self = this;
      self.currentColor = ko.observable(["red"]);
    }

    var vm = new checkboxsetModel();
 
    $(document).ready(
      function()
      {
        ko.applyBindings(vm, document.getElementById('formId'));
      }
    );
  });

The Oracle JET Cookbook contains complete examples for configuring the ojCheckboxset and ojRadioset components. You can also find examples that show how to disable the component or one of its input elements, display the component inline, and test validation. For details, see Checkbox Sets and Radio Sets.

Working with Color Pickers

Use Oracle JET color picker components to select specific color values.

You can use Oracle JET ojColorPalette and ojColorSpectrum components to display a color palette with a predefined set of colors or to define a custom color value from a display that contains a saturation spectrum.

The value option of the color pickers is an object of the oj.Color type. You can create an oj.Color object instance from a CSS-like color string and then pass that instance.

The Oracle JET Cookbook contains the complete examples that you can use to create color pickers and define their behavior at Color Palette and Color Spectrum.

Working with ojColorPalette

Use ojColorPalette to display a predefined set of colors from which a specific color can be selected. The ojColorPalette component supports a grid layout with or without labels and a list layout with or without labels.

The following image shows the ojColorPalette component using a grid layout and large color swatches with labels.

Description of GUID-BD16D875-4FD6-4337-AF6C-D1DB7D213F12-default.png follows
Description of the illustration GUID-BD16D875-4FD6-4337-AF6C-D1DB7D213F12-default.png

The swatch size of the ojColorPalette component using a grid layout can be large, small or extra small.

The following image shows the ojColorPalette component using a list layout with small color swatches with labels.

Description of GUID-EE41D8E1-47C0-40BE-A806-63264C679908-default.png follows
Description of the illustration GUID-EE41D8E1-47C0-40BE-A806-63264C679908-default.png

The swatch size of the ojColorPalette component using a list layout can be large or small.

To create the ojColorPalette component, add an HTML div container element and use the ojComponent binding. The code sample below shows the markup for the color palette component that uses large color swatches with labels.

<div id="colorPaletteDemo">

  ... contents omitted

 <label id="mainlabelid">Color palette</label>
 <div  class="demo-palette-panel oj-panel oj-panel-shadow-lg">
   <div class="demo-palette-picker" aria-labelledby="mainlabelid"
          data-bind="ojComponent: {
            component:    'ojColorPalette',
            palette:      mypalette,
            swatchSize:   swatchSize,
            labelDisplay: labelDisplay,
            layout:       'grid',
            value:        colorValue
          }" ></div>
 </div>
<div> 

The colorValue is defined in the view model as follows:

require(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'ojs/ojcolorpalette', 'ojs/ojcolor', 'ojs/ojvalidation-base', 'ojs/ojbutton'],
 function(oj, ko, $)
 {
   function Model()
   {
      var self = this;
      self.colorValue = ko.observable(oj.Color.BISQUE);
      self.swatchSizes = ["lg", "sm", "xs"];
      self.labelDisplays = ["auto", "off"];
      self.swatchSize = ko.observable(self.swatchSizes[0]);
      self.labelDisplay = ko.observable(self.labelDisplays[0]);

      ... remaining contents omitted

To set a component to disabled, you set the disabled option in the markup.

<div id="colorPaletteDemo">

   ... contents omitted

   <div class="demo-palette-panel oj-panel oj-panel-shadow-lg">
       <div class="demo-palette-picker" aria-labelledby="mainlabelid"
          data-bind="ojComponent: {
            component:    'ojColorPalette',
            palette:      mypalette,
            swatchSize:   'lg',
            labelDisplay: 'auto',
            layout:       'grid',
            value:        colorValue,
            disabled:     paletteDisabled
          }"></div>
   </div>

For additional information about adding an Oracle JET component to your page, see Color Palette.

Working with ojColorSpectrum

Use ojColorSpectrum to display a saturation spectrum with hue and opacity sliders from which you can retrieve a custom color value.

The following image shows the ojColorSpectrum component.

Description of GUID-9BBA521A-AA1A-431C-9AFC-862723D957C3-default.png follows
Description of the illustration GUID-9BBA521A-AA1A-431C-9AFC-862723D957C3-default.png

To create the ojColorSpectrum component, you can use the ojComponent binding with Knockout's data-bind syntax.

<div id="colorSpectrumDemo">

       ... contents omitted

   <label id="mainlabelid">Color spectrum</label>
   <div  class="demo-color-panel oj-panel oj-panel-shadow-lg">
     <div class="demo-color-spectrum" aria-labelledby="mainlabelid"
        data-bind="ojComponent: {
         component:    'ojColorSpectrum',
         value:        colorValue
        }" ></div>
   </div>
</div>

You can disable the component. To set a component to disabled, you set the disabled option in the markup.

<div id="colorSpectrumDemo">

 ... contents omitted

  <label id="mainlabelid">Color spectrum</label>
  <div  class="demo-color-panel oj-panel oj-panel-shadow-lg">
    <div class="demo-color-spectrum" aria-labelledby="mainlabelid"
         data-bind="ojComponent: {
           component: 'ojColorSpectrum',
           value:     colorValue,
           disabled:  spectrumDisabled
           }"></div>
  </div>

</div>

For additional information about adding an Oracle JET component to your page, see Color Spectrum.

Working with Comboboxes

The Oracle JET ojCombobox enhances the HTML input and datalist elements to display dropdown lists that are themable and WAI-ARIA compliant. ojCombobox supports single-select, multi-select, free text input, and search filtering.

The image below shows three single-select comboboxes and one multi-select combobox. In this example, the first combobox displays the default dropdown list. The other single-select combo boxes illustrate a disabled item option and items that include images with the item text.

The user can select one of the items from the dropdown list or erase the current value and enter text in the input field to search the list of available options. The user can also enter non-matching text to add a new item. In the example below, the user typed re which matches the Internet Explorer and Firefox list items.

Tip:

You can use the Oracle JET ojSelect component to create read-only dropdown lists. For additional information, see Working with Select.

To create the combobox, you can use the ojComponent binding to create an ojCombobox component on the input DOM node. Add a datalistto your markup which contains the options displayed in the combobox. The code sample below shows the markup for the single-select combobox with all option items enabled.

<form id="form1">
  <label for="combobox">Single-select Combobox</label>
  <input id="combobox" list="browsers"
         data-bind="ojComponent: {component: 'ojCombobox', value: val,
                    rootAttributes: {style:'max-width:20em'}}"/>
  <datalist id="browsers">
    <option value="Internet Explorer">Internet Explorer</option>
    <option value="Firefox">Firefox</option>
    <option value="Chrome">Chrome</option>
    <option value="Opera">Opera</option>
    <option value="Safari">Safari</option>
  </datalist>
  <div>
    <br/>
    <label for="curr-value" class="oj-label">Curr value is: </label>
    <span id="curr-value" data-bind="text: ko.toJSON(val)"></span>
  </div>
</form>

The code that defines the val value is defined in the ValueModel() constructor function, shown below.

require(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'ojs/ojselectcombobox'],
function(oj, ko, $)
{  
  $(document).ready(
    function()
    {
      function ValueModel() {
          this.val = ko.observableArray(["Chrome"]);
      }
      ko.applyBindings(new ValueModel(), document.getElementById('form1'));
    }
  );
});  

Note:

The HTML datalist element is not supported on Internet Explorer (IE) 9. If your application must support IE9, you can create the ojCombobox using an options array instead of the datalist. The options array is an array of objects with value/label properties in string format.

The Oracle JET Cookbook contains complete examples for configuring the single-select and multi-select comboboxes at Comboboxes. You can also find examples for implementing the options array, setting the width, handling events, adding new entries, including images with the list items, and using a Knockout foreach binding to initialize the combobox.

Working with Form Controls

Oracle JET components that support input, such as the ojInputText component, provide form controls that you can use to indicate that a component is disabled or, in some cases, read only. When the component is disabled, the input fields appear grayed out, and keyboard navigation is also disabled. When the component is set to read only, the input field is not displayed, and keyboard navigation is disabled as well.

To set a component to disabled or read only, you set the disabled or readOnly option in the markup and specify the method that will be called when the component is marked disabled or readOnly. The following code sample shows the markup for the ojInputText component.

<div id="form-container">
  ... contents omitted
  <div class="oj-flex-item">
  <label for="inputcontrol">input</label>
  </div>
  <div class="oj-flex-item">
    <input id="inputcontrol"
           data-bind="ojComponent: {component: 'ojInputText', value:'text',
                      disabled: disableFormControls,
                      readOnly: readonlyFormControls}"/>
  </div>
</div>

The disableFormControls() and readonlyFormControls() methods set the Knockout observable to false.

require(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'ojs/ojinputtext'],
  function(oj, ko, $)
  {
    function StateModel() {
      this.disableFormControls = ko.observable(false);
      this.readonlyFormControls = ko.observable(false);     
    }
    $(document).ready(
      function()
      {
        ko.applyBindings(new StateModel(),
        document.getElementById('form-container'));
      }
    );
  });

Note:

You can also set disabled as an attribute on the input element. If you use this method, then disabled will only be picked up at component creation. Changing the native input element's disabled state after creation will have no effect.

The Oracle JET Cookbook at Form Controls includes the complete example for the ojInputText component as well as the other Oracle JET components that support disabled and readOnly options. In addition, you can find examples for using placeholder text and controlling the form's width and height.

Working with Form Layout Features

Oracle JET provides style classes that you can use to create form layouts that adjust to the size of the user's screen. For additional information, see Responsive Form Layouts. For examples that illustrate best practices for form layout in Oracle JET applications, see Form Layouts.

Working with Input Text Components

The Oracle JET text input components enhance standard HTML input and textarea elements. Enhancements include support for custom validation and conversion, accessibility, internationalization, and more. The Forms page in the Oracle JET Cookbook includes examples for working with the following Oracle JET input components.

Oracle JET Component Image HTML5 Element

ojInputDate

Input date

input type="text"

ojInputDate enhances the HTML input type="text" element to generate an element that contains an ISO date. The Oracle JET component enhances the text type input element instead of the HTML5 date input type (input type="date") due to lack of universal browser support.

ojInputDateTime

Input Date Time

input type="text"

ojInputDateTime enhances the HTML input type="text" element to generate an element that contains an ISO date and time. The Oracle JET component enhances the text type input element instead of the HTML5 datetime input type (input type="datetime") due to lack of universal browser support.

ojInputNumber

Input number

input type="text"

ojInputNumber enhances the HTML input type="text" element to generate an element that contains numbers. The Oracle JET component enhances the text type input element instead of the HTML5 number input type (input type="number") due to lack of universal browser support.

ojInputPassword

Input password

input type="password"

ojInputSearch

Input search

input type="text"

ojInputSearch enhances the HTML input type="text" element to generate an element that provides search suggestions based on user input. The Oracle JET component enhances the text type input element instead of the HTML5 time input type (input type="search") due to lack of universal browser support.

ojInputText

Input text

input type="text"

ojInputTime

Input time

input type="text"

ojInputTime enhances the HTML input type="text" element to generate an element that contains an ISO time. The Oracle JET component enhances the text type input element instead of the HTML5 time input type (input type="time") due to lack of universal browser support.

ojTextArea

Input text area

textarea

The editable input components include converters and validators that you can customize as needed. For additional information, see Validating and Converting Input.

The components also support help and hint messages that you can customize to provide user assistance in your application. For additional information, see Working with User Assistance.

Working with Labels

The Oracle JET input components (ojInputText, ojTextArea, ojInputDate, and so on) automatically find their label and apply additional DOM and styling to the label element. To allow the input components to find their label, you must do one of the following:

  • Use for on the label to point to the id of the input component.

    <label for="input">input</label>
    <input id="input"
           data-bind="ojComponent: {component: 'ojInputText', value:'text'}"/>
    
  • Use aria-labelledby on the DOM node to point to the id of the label.

    <label id="inputtextlabel">input</label>
    <div id="input" aria-labelledby="inputtextlabel"
         data-bind="ojComponent: {component: 'ojInputText', value:'text'}"/>
    

Labels are top aligned by default, following best practices for mobile devices.

You can modify the labels to display inline by adding the oj-label-inline class to the HTML label element.

<div>
    <label for="input" class="oj-label-inline">input</label>
    <input id="input"
           data-bind="ojComponent: {component: 'ojInputText', value:'text'}"/>
</div>

When the user runs the page, the label for the ojInputText component displays inline.

The Oracle JET Cookbook includes additional examples for using help and required modifiers. In addition, the cookbook contains examples for displaying access keys, making multiple labels on one field accessible, and making multiple fields on one label accessible. For details, see Labels.

Working with Select

You can use the Oracle JET ojSelect component to display read-only, dropdown lists that are themable and WAI-ARIA compliant. The ojSelect component enhances the HTML select and option elements and supports single and multiple selection with search filtering.

The dropdown list displays when the user does one of the following:

  • Clicks on the select box.

  • Sets focus on the select box and starts typing or presses the Enter, Arrow Up, or Arrow Down key.

A search box automatically displays with the dropdown list when the number of available list items is greater than the value in the component's minimumResultsForSearch option. The minimumResultsForSearch option's value defaults to 10, and a search box will display automatically whenever the number of list items is greater than 10.

For example, there are five items in the dropdown list shown above so a search box is not displayed by default. However, the user can still display a search box by typing in the search box.

Tip:

You can also use the Oracle JET ojCombobox component to create dropdown lists that support single and multiple selection. The ojCombobox component also supports user input to add items to the dropdown list. For additional information, see Working with Comboboxes.

The code sample below shows the markup used to create the multi-select ojSelect component shown in this section. In this example, a search box will display automatically. The multiple option is true, and the component will support multiple selection.

<form id="form1">
  <label for="multiSelect">Multi Select</label>
  <select id="multiSelect"
          data-bind="ojComponent: {component: 'ojSelect',
                                   multiple: true, 
                                   value: val,
                                   rootAttributes: {style:'max-width:20em'}}">
    <option value="Internet Explorer">Internet Explorer</option>
    <option value="Firefox">Firefox</option>
    <option value="Chrome">Chrome</option>
    <option value="Opera">Opera</option>
    <option value="Safari">Safari</option>
  </select>
    <div>
      <br/>
      <label for="curr-value" class="oj-label">Curr value is: </label>
      <span id="curr-value" data-bind="text: ko.toJSON(val)"></span>
</form>

Note:

For accessibility, ojSelect requires that you set the for attribute on the label element to point to the id of the select element. For additional information about creating accessible Oracle JET components, see Using the Accessibility Features of Oracle JET Components.

The code sample also defines max-width using the rootAttributes style option. Use max-width instead of width to ensure that the component adjusts its width automatically when the display width changes.

The code that defines the val value is defined in the ValueModel() function, shown below. val is defined as a Knockout observable, with its initial values set to Chrome and Safari.

require(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'ojs/ojselectcombobox'],
function(oj, ko, $)
{  
  $(document).ready(
    function()
    {
      function ValueModel() {
        this.val = ko.observableArray(["Chrome","Safari"]);
      }
      ko.applyBindings(new ValueModel(), document.getElementById('form1'));
    }
  );
});

The Oracle JET Cookbook contains the complete example for configuring the ojSelect component. You can also find examples that show how to disable the component, group related components in the dropdown list, bind an event handler to the component's optionChange event, and more. For details, see Select.

Working with Sliders

A slider component displays a horizontal or vertical bar representing a numeric range and one or two thumbs, also called handles. The Oracle JET ojSlider component enhances the HTML input element to provide a slider component that is themable and WAI-ARIA compliant.

About the ojSlider Component

The ojSlider component supports horizontal or vertical sliders with one or two thumbs. The user can use gestures, mouse, or keyboard on the thumb to adjust the value within the slider’s range when one thumb is present or set a range within the slider when two thumbs are present.

The following image shows three ojSlider components. The top two components illustrate sliders with horizontal orientation. In the first slider, the slider’s current value is shown as 100. In the middle slider, the user selected a range from 100 to 400. The bottom slider shows a slider with the vertical orientation, with current value set to 100.

Creating Sliders

To create the ojSlider component, add the HTML input element to a div container element or your form container and use the ojComponent binding to create the component. Use the component's min and max options to set the slider range and the component’s value option to set the thumb’s initial value.

To add the ojSlider component to your page:
  1. Add the markup to your page for the HTML container element, the HTML input element, and the ojComponent binding for the ojSlider component. Use the component’s type option to specify whether the slider has a single thumb or two. By default, your slider is created with a single thumb where the value bar goes from the slider min to the slider thumb.
    1. To create a slider with a single thumb, set values for the slider’s minimum, maximum, and step values.

      Optionally, set the component’s type option to single to remove additional styling on the value bar or fromMax to color the value bar from the slider thumb to the slider maximum. By default the component’s type option is set to fromMin, which will color the bar from the slider’s minimum value to the slider thumb. The following code sample shows the markup for the horizontal slider with a single thumb shown in this section.

      <div id="slider-container">
        <label for="slider-id"> ojSlider component </label>
        <input id="slider-id"
               data-bind="ojComponent: {
                          component: 'ojSlider',
                                     max:max,
                                     min:min, 
                                     step:step, 
                                     value:currentValue
                          }"/>
         <span> Current Value: </span>
         <span> id="curr-value" data-bind="text: currentValue"></span>
      </div>   
      

      For additional information about the type option and other formatting tips, see Formatting Tips for ojSlider.

    2. To create a slider with two thumbs, set the type option to range and the value option to an array containing two numbers.

      The following code sample shows the markup for the horizontal slider with two thumbs shown in this section. In this example, the type option is set to range , and the value option is set to ValueArray which is a variable representing a two-number array.

      <div id="slider-container">
       <label for="slider-id"> ojSlider component </label>
       <div id="flex-container" style="display:flex; align-items:center">  
       <span id="value1" data-bind="text: valueArray()[0]"> </span> 
            <input id="slider-id"
               data-bind="ojComponent: {
                          component: 'ojSlider', 
                                     type: 'range',
                                     max:max,
                                     min:min, 
                                     step:step, 
                                     value: ValueArray                  
            }"/>
         
         <span> id="value2" data-bind="text: ValueArray()[1]"></span>
         </div> <!--flex container>
        </div>   
      

    Note:

    For accessibility, the div container includes a label element that associates the ojSlider component with the label. See the ojSlider API documentation for accessibility details and associated keyboard and touch end user support.
  2. Add code to your application script that sets the values for the options you specified in the previous step.

    The min, max, step, currentValue, and ValueArray variables specified for the ojSlider component's options are defined in the application's main script, shown below. The min and max variables represent the start and end values of the slider’s range. The currentValue variable represents the current value of the thumb. The currentValueArray, shown in a comment, represents the initial range for a slider with two thumbs.

    require(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'ojs/ojslider'],
        function(oj, ko, $) 
        {
          function rangeSliderModel() 
          {
            var self = this;
            self.ValueArray = ko.observableArray([100, 400]);
            self.max = ko.observable(500);
            self.min = ko.observable(0);
                    
            self.step = ko.observable(10);
          }
          var rangesliderModel = new rangeSliderModel();
          $(document).ready(
            function()
            {
              ko.applyBindings(rangesliderModel, document.getElementById('slider-container'));
            }
          );
        });
    

    The step option indicates the size of the interval the slider takes between the min and max values.

    Note:

    The full specified value of the range (max - min) should be evenly divisible by step.

Formatting Tips for ojSlider

The ojSlider component provides options that allow you to customize a horizontal slider’s width, change the slider’s orientation to vertical, adjust a vertical slider’s height, change the location of the bar’s coloring, or disable it.

You may find the following tips helpful when working with sliders.

  • To change the horizontal slider’s width, enter a style value in the value the ojSlider component’s rootAttributes option. The example below shows how you could specify an absolute width of 25 em on the ojSlider used in this section.

    <label for="slider-id"> ojSlider component for="slider-id"> ojSlider component</label>
    <input id="slider-id"
           data-bind="ojComponent: {
                      component: 'ojSlider', 
                                 range: 'fromMin',
                                 max:max,
                                 min:min, 
                                 step:step, 
                                 value:currentValue,
                      rootAttributes: {style:'max-width:25em'}}"/>
    

    To specify a width as a percentage of the maximum width available, set the max-width style to a percentage.

    rootAttributes: {style:'max-width:100%'}
    
  • To create a vertical slider, set the ojSlider component’s orientation option to vertical.

    <label for="slider-id"> ojSlider component for="slider-id"> ojSlider component</label>
    <input id="slider-id"
           data-bind="ojComponent: {
                      component: 'ojSlider',
                      orientation: 'vertical',
                      ... contents ommited
                      }"/>
    
  • To change the vertical slider’s height, set the style attribute directly on the input element.

    <label for="slider-id"> ojSlider component for="slider-id"> ojSlider component</label>
    <input id="slider-id" style="height: 150px"
    data-bind="ojComponent: {
               component: 'ojSlider',
               orientation: 'vertical',
               ... contents ommited
               }"/>
    
  • To color the bar from the slider maximum value to the slider thumb, set the component’s range option to fromMax. The ojSlider component’s range option defaults to fromMin, which will color the bar from the minimum value to the slider thumb.

  • To remove coloring from the slider bar, set the component’s range option to none.

  • For sliders with two thumbs, set the component’s range option to between to color the bar between the thumbs.

  • To display a slider that displays a value but does not allow interaction, set the component’s disabled option to true.

Cookbook Examples

The Oracle JET cookbook includes the complete examples shown in this section at Sliders. You can also find examples that show disabled sliders and sliders with icons on the bar to manipulate the thumb.

Working with Switches

A switch component displays two mutually exclusive choices to a user, typically ON or OFF. The Oracle JET ojSwitch component enhances the HTML input element to provide a switch component that is themable and WAI-ARIA compliant. You can also disable a switch or make it read only using component options and display a switch inline using built-in style classes.

The following image shows an ojSwitch component in on, off, disabled, and read only states. The display changes when the switch has focus to provide a visual clue to the user that the switch is selectable.

To create the ojSwitch component, add the HTML input element to your form or other container element, and use the ojComponent binding to create the component. Use the component's value option to set the initial state to true or false.

The following code sample shows the markup for the ojSwitch shown in this section. For accessibility, the form container includes a label element that associates the ojSwitch component with the label. See the ojSwitch API documentation for accessibility details and associated keyboard and touch end user support.

<form id="formId">
  <label id="switchLabel" for="switch">ojSwitch component</label>
  <input id="switch" data-bind="ojComponent: {component: 'ojSwitch', value: isChecked}"/><br/>
  <span>ojSwitch is </span><span data-bind="text: ((isChecked()) ? 'ON' : 'OFF')"></span>
</form>

The isChecked variable specified for the ojSwitch component's value option is defined in the application's main script, shown below. In this example, the isChecked variable is a boolean set to true by a call to the Knockout observable() function.

require(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'ojs/ojswitch'],
function(oj, ko, $)
{
  function SwitchModel(){
    this.isChecked = ko.observable(true);
  }
 
  var switchModel = new SwitchModel();
 
  $(document).ready(
    function()
    {
      ko.applyBindings(switchModel, 
      document.getElementById('formId'));
    }
  );
});

Tip:

You can configure ojSwitch to display inline with its label.

To configure an inline switch, add the oj-label-inline class to the switch's label.

<label id="switchLabel" for="switch" class="oj-label-inline">ojSwitch component</label>

To disable the switch, set the component's disabled option to true. To make the switch read only, set the component’s readOnly option to true.

The Oracle JET cookbook includes the complete example shown in this section at Switches. You can also find examples that implement disabled, read only, and inline switches.

Working with Validation and User Assistance

The Oracle JET editable components display help, converter and validator hints, title, and messaging content by default. If needed, you can customize the defaults for displaying content.

The image below shows examples of converter hints and title. The example on the left uses default converter hints, and the example on the right uses custom placeholder text. The title text by default appears in the note window.

You can create multiple validators on a component. The image below shows an example that uses multiple validators on an ojInputNumber component.

The Oracle JET Cookbook contains complete examples that you can use to customize help, converter and validator hints, title, and messaging content. See User Assistance.

For more information about best practices for form validation, see Applying Form Validation Best Practices.

For information about validating and converting input on the Oracle JET input components, see Validating and Converting Input. For information about using and customizing Oracle JET user assistance, see Working with User Assistance.