- B - I - U + + +

-

-

A checkbox is styled as a toggle button with the button widget. The label element associated with the checkbox is used for the button text.

-

This demo also demonstrates three checkboxes styled as a button set by calling .buttonset() on a common container.

+ + Checkbox widget sample + Checkbox widget sample + + + Radio widget sample + Radio widget sample 2 + Reset +

diff --git a/tests/unit/button/button_common.js b/tests/unit/button/button_common.js index ef22d30114f..4994494dddc 100644 --- a/tests/unit/button/button_common.js +++ b/tests/unit/button/button_common.js @@ -1,12 +1,10 @@ TestHelpers.commonWidgetTests( "button", { defaults: { disabled: null, - icons: { - primary: null, - secondary: null - }, - label: null, text: true, + label: null, + icon: null, + iconPosition: "begining", // callbacks create: null diff --git a/tests/unit/button/button_core.js b/tests/unit/button/button_core.js index f647cdc26b1..bb054b334b7 100644 --- a/tests/unit/button/button_core.js +++ b/tests/unit/button/button_core.js @@ -7,66 +7,6 @@ module("button: core"); -test("checkbox", function() { - expect( 4 ); - var input = $("#check"), - label = $("label[for=check]"); - ok( input.is(":visible") ); - ok( label.is(":not(.ui-button)") ); - input.button(); - ok( input.is(".ui-helper-hidden-accessible") ); - ok( label.is(".ui-button") ); -}); - -test("radios", function() { - expect( 4 ); - var inputs = $("#radio0 input"), - labels = $("#radio0 label"); - ok( inputs.is(":visible") ); - ok( labels.is(":not(.ui-button)") ); - inputs.button(); - ok( inputs.is(".ui-helper-hidden-accessible") ); - ok( labels.is(".ui-button") ); -}); - -function assert(noForm, form1, form2) { - ok( $("#radio0 .ui-button" + noForm).is(".ui-state-active") ); - ok( $("#radio1 .ui-button" + form1).is(".ui-state-active") ); - ok( $("#radio2 .ui-button" + form2).is(".ui-state-active") ); -} - -test("radio groups", function() { - expect( 12 ); - $("input[type=radio]").button(); - assert(":eq(0)", ":eq(1)", ":eq(2)"); - - // click outside of forms - $("#radio0 .ui-button:eq(1)").click(); - assert(":eq(1)", ":eq(1)", ":eq(2)"); - - // click in first form - $("#radio1 .ui-button:eq(0)").click(); - assert(":eq(1)", ":eq(0)", ":eq(2)"); - - // click in second form - $("#radio2 .ui-button:eq(0)").click(); - assert(":eq(1)", ":eq(0)", ":eq(0)"); -}); - -test( "radio groups - ignore elements with same name", function() { - expect( 1 ); - var form = $( "form:first" ), - radios = form.find( "[type=radio]" ).button(), - checkbox = $( "", { - type: "checkbox", - name: radios.attr( "name" ) - }); - - form.append( checkbox ); - radios.button( "refresh" ); - ok( true, "no exception from accessing button instance of checkbox" ); -}); - test("input type submit, don't create child elements", function() { expect( 2 ); var input = $("#submit"); @@ -75,150 +15,15 @@ test("input type submit, don't create child elements", function() { deepEqual( input.children().length, 0 ); }); -test("buttonset", function() { - expect( 6 ); - var set = $("#radio1").buttonset(); - ok( set.is(".ui-buttonset") ); - deepEqual( set.children(".ui-button").length, 3 ); - deepEqual( set.children("input[type=radio].ui-helper-hidden-accessible").length, 3 ); - ok( set.children("label:eq(0)").is(".ui-button.ui-corner-left:not(.ui-corner-all)") ); - ok( set.children("label:eq(1)").is(".ui-button:not(.ui-corner-all)") ); - ok( set.children("label:eq(2)").is(".ui-button.ui-corner-right:not(.ui-corner-all)") ); -}); - -test("buttonset (rtl)", function() { - expect( 6 ); - var set, - parent = $("#radio1").parent(); - // Set to rtl - parent.attr("dir", "rtl"); - - set = $("#radio1").buttonset(); - ok( set.is(".ui-buttonset") ); - deepEqual( set.children(".ui-button").length, 3 ); - deepEqual( set.children("input[type=radio].ui-helper-hidden-accessible").length, 3 ); - ok( set.children("label:eq(0)").is(".ui-button.ui-corner-right:not(.ui-corner-all)") ); - ok( set.children("label:eq(1)").is(".ui-button:not(.ui-corner-all)") ); - ok( set.children("label:eq(2)").is(".ui-button.ui-corner-left:not(.ui-corner-all)") ); -}); - -// TODO: simulated click events don't behave like real click events in IE -// remove this when simulate properly simulates this -// see http://yuilibrary.com/projects/yui2/ticket/2528826 fore more info -if ( !$.ui.ie || ( document.documentMode && document.documentMode > 8 ) ) { - asyncTest( "ensure checked and aria after single click on checkbox label button, see #5518", function() { - expect( 3 ); - - $("#check2").button().change( function() { - var lbl = $( this ).button("widget"); - ok( this.checked, "checked ok" ); - ok( lbl.attr("aria-pressed") === "true", "aria ok" ); - ok( lbl.hasClass("ui-state-active"), "ui-state-active ok" ); - }); - - // support: Opera - // Opera doesn't trigger a change event when this is done synchronously. - // This seems to be a side effect of another test, but until that can be - // tracked down, this delay will have to do. - setTimeout(function() { - $("#check2").button("widget").simulate("click"); - start(); - }, 1 ); - }); -} - -test( "#7092 - button creation that requires a matching label does not find label in all cases", function() { - expect( 5 ); - var group = $( "" ); - group.find( "input[type=checkbox]" ).button(); - ok( group.find( "label" ).is( ".ui-button" ) ); - - group = $( "" ); - group.filter( "input[type=checkbox]" ).button(); - ok( group.filter( "label" ).is( ".ui-button" ) ); - - group = $( "" ); - group.find( "input[type=checkbox]" ).button(); - ok( group.filter( "label" ).is( ".ui-button" ) ); - - group = $( "" ); - group.find( "input[type=checkbox]" ).button(); - ok( group.find( "label" ).is( ".ui-button" ) ); - - group = $( "" ); - group.filter( "input[type=checkbox]" ).button(); - ok( group.find( "label" ).is( ".ui-button" ) ); -}); - -test( "#5946 - buttonset should ignore buttons that are not :visible", function() { - expect( 2 ); - $( "#radio01" ).next().addBack().hide(); - var set = $( "#radio0" ).buttonset({ items: "input[type=radio]:visible" }); - ok( set.find( "label:eq(0)" ).is( ":not(.ui-button):not(.ui-corner-left)" ) ); - ok( set.find( "label:eq(1)" ).is( ".ui-button.ui-corner-left" ) ); -}); - -test( "#6262 - buttonset not applying ui-corner to invisible elements", function() { - expect( 3 ); - $( "#radio0" ).hide(); - var set = $( "#radio0" ).buttonset(); - ok( set.find( "label:eq(0)" ).is( ".ui-button.ui-corner-left" ) ); - ok( set.find( "label:eq(1)" ).is( ".ui-button" ) ); - ok( set.find( "label:eq(2)" ).is( ".ui-button.ui-corner-right" ) ); -}); - -asyncTest( "Resetting a button's form should refresh the visual state of the button widget to match.", function() { - expect( 2 ); - var form = $( "

" + - "" + - "" + - "

" ), - button = form.find( "button" ).button(), - checkbox = form.find( "input[type=checkbox]" ).button(); - - checkbox.prop( "checked", false ).button( "refresh" ); - ok( !checkbox.button( "widget" ).hasClass( "ui-state-active" ) ); - - form.get( 0 ).reset(); - - // #9213: If a button has been removed, refresh should not be called on it when - // its corresponding form is reset. - button.remove(); - - setTimeout(function() { - ok( checkbox.button( "widget" ).hasClass( "ui-state-active" )); - start(); - }, 1 ); -}); - -asyncTest( "#6711 Checkbox/Radiobutton do not Show Focused State when using Keyboard Navigation", function() { - expect( 2 ); - var check = $( "#check" ).button(), - label = $( "label[for='check']" ); - ok( !label.is( ".ui-state-focus" ) ); - check.focus(); - setTimeout(function() { - ok( label.is( ".ui-state-focus" ) ); - start(); - }); -}); - -test( "#7534 - Button label selector works for ids with \":\"", function() { - expect( 1 ); - var group = $( "Label" ); - group.find( "input" ).button(); - ok( group.find( "label" ).is( ".ui-button" ), "Found an id with a :" ); -}); - asyncTest( "#9169 - Disabled button maintains ui-state-focus", function() { expect( 2 ); var element = $( "#button1" ).button(); element[ 0 ].focus(); setTimeout(function() { - ok( element.hasClass( "ui-state-focus" ), "button has ui-state-focus" ); + ok( element.is( ":focus" ), "button is focused" ); element.button( "disable" ); - ok( !element.hasClass( "ui-state-focus" ), - "button does not have ui-state-focus when disabled" ); + ok( !element.is( ":focus" ), + "button has had focus removed" ); start(); }); }); diff --git a/tests/unit/button/button_events.js b/tests/unit/button/button_events.js index 2fd03832562..5940b36b266 100644 --- a/tests/unit/button/button_events.js +++ b/tests/unit/button/button_events.js @@ -5,14 +5,6 @@ module("button: events"); -test("buttonset works with single-quote named elements (#7505)", function() { - expect( 1 ); - $("#radio3").buttonset(); - $("#radio33").click( function(){ - ok( true, "button clicks work with single-quote named elements" ); - }).click(); -}); - asyncTest( "when button loses focus, ensure active state is removed (#8559)", function() { expect( 1 ); diff --git a/tests/unit/button/button_options.js b/tests/unit/button/button_options.js index 124a8699f6f..9edf8cd0b10 100644 --- a/tests/unit/button/button_options.js +++ b/tests/unit/button/button_options.js @@ -43,7 +43,7 @@ test("text false without icon", function() { $("#button").button({ text: false }); - ok( $("#button").is(".ui-button-text-only:not(.ui-button-icon-only)") ); + ok( $("#button").is(":not(.ui-button-icon-only)") ); $("#button").button("destroy"); }); @@ -52,9 +52,7 @@ test("text false with icon", function() { expect( 1 ); $("#button").button({ text: false, - icons: { - primary: "iconclass" - } + icon: "iconclass" }); ok( $("#button").is(".ui-button-icon-only:not(.ui-button-text):has(span.ui-icon.iconclass)") ); @@ -100,12 +98,9 @@ test("icons", function() { expect( 1 ); $("#button").button({ text: false, - icons: { - primary: "iconclass", - secondary: "iconclass2" - } + icon: "iconclass" }); - ok( $("#button").is(":has(span.ui-icon.ui-button-icon-primary.iconclass):has(span.ui-icon.ui-button-icon-secondary.iconclass2)") ); + ok( $("#button").is(":has(span.ui-icon.iconclass)") ); $("#button").button("destroy"); }); diff --git a/themes/base/base.css b/themes/base/base.css index 479c3279d9b..be4508284a2 100644 --- a/themes/base/base.css +++ b/themes/base/base.css @@ -13,6 +13,7 @@ @import url("accordion.css"); @import url("autocomplete.css"); @import url("button.css"); +@import url("checkboxradio.css"); @import url("datepicker.css"); @import url("dialog.css"); @import url("draggable.css"); diff --git a/themes/base/checkboxradio.css b/themes/base/checkboxradio.css new file mode 100644 index 00000000000..dc1e067f0f6 --- /dev/null +++ b/themes/base/checkboxradio.css @@ -0,0 +1,36 @@ +/*! + * jQuery UI Checkboxradio @VERSION + * http://jqueryui.com + * + * Copyright 2013 jQuery Foundation and other contributors + * Released under the MIT license. + * http://jquery.org/license + * + * http://api.jqueryui.com/checkboxradio/#theming + */ + +.ui-checkbox{ + display:none; +} +span.ui-icon-background{ + border-radius: .12em; + border: none; +} +.ui-radio-label .ui-icon.ui-icon-background{ + width: 16px; + height: 16px; + border-radius: 1em; + overflow: visible; + border: none; + background-color: rgba( 0, 0, 0, .3 ); + opacity: .3; +} +label.ui-radio-label.ui-radio-checked .ui-icon, +label.ui-radio-label.ui-radio-checked:hover .ui-icon{ + background-image: none; + background-color: #fff; + width: 8px; + height: 8px; + border-width: 4px; + border-style: solid; +} diff --git a/themes/base/core.css b/themes/base/core.css index 231536fd98d..c93ca79ed3b 100644 --- a/themes/base/core.css +++ b/themes/base/core.css @@ -84,7 +84,7 @@ } .ui-button.ui-icon-begining { - padding-left: 2.1em; + padding-left: 2.4em; } .ui-button.ui-icon-end { @@ -101,7 +101,7 @@ .ui-icon { left: .5em; - top: .2em; + top: .3em; } .ui-icon-end .ui-icon { diff --git a/themes/base/theme.css b/themes/base/theme.css index d807d6eaf31..27391b17454 100644 --- a/themes/base/theme.css +++ b/themes/base/theme.css @@ -57,6 +57,9 @@ font-weight: normal/*{fwDefault}*/; color: #555555/*{fcDefault}*/; } +.ui-state-active .ui-icon-background { + background-color: #e6e6e6/*{bgColorDefault}*/; +} .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, @@ -97,12 +100,16 @@ a.ui-button:focus { .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, -.ui-button:active { +.ui-button:active, +.ui-button.ui-state-active:hover { border: 1px solid #aaaaaa/*{borderColorActive}*/; background: #ffffff/*{bgColorActive}*/ url("images/ui-bg_glass_65_ffffff_1x400.png")/*{bgImgUrlActive}*/ 50%/*{bgActiveXPos}*/ 50%/*{bgActiveYPos}*/ repeat-x/*{bgActiveRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #212121/*{fcActive}*/; } +.ui-icon-background { + background-color: #ffffff/*{bgColorActive}*/; +} .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { diff --git a/ui/button.js b/ui/button.js index 2cfcf0f5985..9eeb6f3f9ab 100644 --- a/ui/button.js +++ b/ui/button.js @@ -25,7 +25,7 @@ }(function( $ ) { var baseClasses = "ui-button ui-widget ui-corner-all", - typeClasses = "ui-button-icons-only ui-button-icon-only ui-button-text-icons ui-button-text-icon-primary ui-button-text-icon-secondary ui-button-text-only", + typeClasses = "ui-button-icons-only ui-button-icon-only ui-button-text-icons ui-button-text-icon-primary ui-button-text-icon-secondary ui-button-text-only ui-icon-begining ui-icon-end ui-icon-top ui-icon-bottom", formResetHandler = function() { var form = $( this ); setTimeout(function() { @@ -70,6 +70,11 @@ $.widget( "ui.button", { if ( typeof this.options.disabled === "boolean" ) { this.element.prop( "disabled", this.options.disabled ); + } else { + this.options.disabled = !!this.element.prop( "disabled" ); + } + if( this.options.disabled === true ){ + this._setOption( "disabled", true ); } this.element @@ -85,7 +90,6 @@ $.widget( "ui.button", { if( !this.options.text ){ this.element.addClass( " ui-button-icon-only" ); } - console.log( this.icon ); this.element.append( this.icon ); this._setTitle(); } @@ -93,9 +97,14 @@ $.widget( "ui.button", { if( this.isInput ) { this.element.val( this.options.label ); } else { - this.element.contents().filter( function() { + var textNode = this.element.contents().filter( function() { return this.nodeType === 3; - })[0].nodeValue = this.options.label; + })[ 0 ]; + if( textNode !== undefined ) { + textNode.nodeValue = this.options.label; + } else { + this.element.html( this.options.label + this.element.html() ); + } } } @@ -122,7 +131,7 @@ $.widget( "ui.button", { _destroy: function() { this.element - .removeClass( "ui-helper-hidden-accessible" + baseClasses + " ui-state-active " + typeClasses ) + .removeClass( "ui-helper-hidden-accessible " + baseClasses + " ui-state-active " + typeClasses ) .removeAttr( "role" ) .removeAttr( "aria-pressed" ); @@ -155,14 +164,14 @@ $.widget( "ui.button", { this._super( key, value ); if ( key === "disabled" ) { this.element.toggleClass( " ui-state-disabled", !!value ); - this.element.prop( "disabled", !!value ); + this.element.prop( "disabled", !!value ).blur(); return; } }, refresh: function() { //See #8237 & #8828 - var isDisabled = this.element.hasClass( "ui-button-disabled" ); + var isDisabled = this.element.is( "input, button" ) ? this.element.is( ":disabled" ) : this.element.hasClass( "ui-button-disabled" ); if ( isDisabled !== this.options.disabled ) { this._setOptions( { "disabled": isDisabled } ); diff --git a/ui/checkboxradio.js b/ui/checkboxradio.js new file mode 100644 index 00000000000..a7a149f6fd7 --- /dev/null +++ b/ui/checkboxradio.js @@ -0,0 +1,223 @@ +/*! + * jQuery UI Checkboxradion @VERSION + * http://jqueryui.com + * + * Copyright 2013 jQuery Foundation and other contributors + * Released under the MIT license. + * http://jquery.org/license + * + * http://api.jqueryui.com/checkboxradio/ + * + * Depends: + * jquery.ui.core.js + * jquery.ui.widget.js + */ +(function( $, undefined ) { + +var baseClasses = "ui-button ui-widget ui-corner-all", + formResetHandler = function() { + var form = $( this ); + setTimeout(function() { + form.find( ":ui-checkboxradio" ).checkboxradio( "refresh" ); + }, 1 ); + }, + radioGroup = function( radio ) { + var name = radio.name, + form = radio.form, + radios = $( [] ); + if ( name ) { + name = name.replace( /'/g, "\\'" ); + if ( form ) { + radios = $( form ).find( "[name='" + name + "']" ); + } else { + radios = $( "[name='" + name + "']", radio.ownerDocument ) + .filter(function() { + return !this.form; + }); + } + } + return radios; + }; + +$.widget( "ui.checkboxradio", { + version: "@VERSION", + defaultElement: "", + options: { + disabled: null, + label: null, + icon: null + }, + + _getCreateOptions: function () { + var label, + isDisabled = this.element.prop( "disabled" ), + options = {}; + + this.isInput = this.element.is( "input" ); + label = ( this.isInput ? this.element.val() : this.element.html() ); + + if ( typeof isDisabled !== "undefined" ) { + options.disabled = isDisabled; + } + + return options; + }, + + _create: function() { + this.element.closest( "form" ) + .unbind( "reset" + "." + this.widgetName ) + .bind( "reset" + "."+ this.widgetName, formResetHandler ); + + if ( typeof this.options.disabled === "boolean" ) { + this.element.prop( "disabled", this.options.disabled ); + } else { + this.options.disabled = !!this.element.prop( "disabled" ); + } + + this._getType(); + + this._getLabel(); + + this.element.addClass( "ui-helper-hidden-accessible ui-checkboxradio" ); + + this.label.addClass( baseClasses + " ui-" + this.type + "-label" ); + + if ( this.options.icon ) { + this.label.addClass( "ui-icon-begining" ); + this.icon = $( "" ); + if ( this.element.is( ":checked" ) && this.type === "checkbox" ){ + this.icon.addClass( "ui-icon ui-icon-background ui-corner-all ui-icon-check" ); + } else { + this.icon.addClass( "ui-icon ui-icon-background ui-corner-all ui-icon-blank" ); + } + this.label.prepend( this.icon ); + } + if ( this.element.is( ":checked" ) ){ + this.label.addClass( "ui-" + this.type + "-checked" ); + } + if ( this.options.label ){ + this.label.html( this.options.label ); + } + + this._on({ + "change" : "_toggleClasses", + "focus": "_handleFocus", + "blur": "_handleBlur" + }); + }, + + widget: function() { + return this.label; + }, + + _getType: function() { + if ( this.element.is("[type=checkbox]") ) { + this.type = "checkbox"; + } else if ( this.element.is("[type=radio]") ) { + this.type = "radio"; + } + }, + + _getLabel: function() { + if ( this.element[0].labels ){ + this.label = $( this.element[0].labels[0] ); + return; + } + + var label, + id = this.element.attr( "id" ); + + label = this.element.closest( "form" ).find( "label[for='" + id + "']" ); + + if ( label.length === 0 ){ + label = this.element.closest( "label" ); + } + + this.label = label; + }, + + _toggleClasses: function() { + this.label.toggleClass( "ui-" + this.type + "-checked ui-state-active" ); + if ( this.options.icon && this.type === "checkbox" ) { + this.icon.toggleClass( "ui-icon-check ui-icon-blank" ); + } + if ( this.type === "radio" ) { + if ( this.options.disabled ) { + return false; + } + radioGroup( this.element[0] ) + .not( this.element ) + .map(function() { + return $( this ).checkboxradio( "widget" )[ 0 ]; + }) + .removeClass( "ui-state-active ui-radio-checked" ); + } + }, + + _handleBlur: function() { + this.label.removeClass( "ui-state-focus" ); + }, + + _handleFocus: function() { + this.label.addClass( "ui-state-focus" ); + }, + + _destroy: function() { + this.label.removeClass( "ui-button ui-corner-all ui-icon ui-icon-background ui-state-focus ui-icon-check " + + "ui-icon-blank ui-radio-label ui-checkboxlabel ui-radio-checked ui-checkbox-checked" ); + this.element.removeClass( "ui-helper-hidden-accessible" ); + }, + + _setOption: function( key, value ) { + this._super( key, value ); + if ( key === "disabled" ) { + + this.label.toggleClass( " ui-state-disabled", !!value ); + this.element.prop( "disabled", !!value ); + return; + } + this.refresh(); + }, + + _setClasses: function() { + var checked = this.element.is( ":checked" ); + if ( this.options.icon === true ){ + this.label.addClass( "ui-icon-begining" ); + if ( this.icon === undefined ) { + this.icon = $( "" ); + this.label.prepend( this.icon ); + } + if ( this.type === "checkbox" && checked ) { + this.icon.addClass( "ui-icon ui-icon-background ui-corner-all ui-icon-check" ); + } else { + this.icon.addClass( "ui-icon ui-icon-background ui-corner-all ui-icon-blank" ); + } + } else if ( this.icon !== undefined ) { + this.label.removeClass( "ui-icon-begining" ); + this.icon.remove(); + delete this.icon; + } + if ( checked ) { + this.label.addClass( "ui-state-active ui-" + this.type + "-checked" ); + } else { + this.label.removeClass( "ui-state-active ui-" + this.type + "-checked" ); + } + if ( this.options.label !== null ) { + this.label.contents().not( this.label.children() )[0].nodeValue = this.options.label; + } + }, + + refresh: function() { + + this._setClasses(); + //See #8237 & #8828 + var isDisabled = this.element.hasClass( "ui-checkboxradio-disabled" ); + + if ( isDisabled !== this.options.disabled ) { + this._setOptions( { "disabled": isDisabled } ); + } + } + +}); + +}( jQuery ) ); From 747635a8ee0aea6cfc0f064257ce3226909af3e3 Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Mon, 10 Feb 2014 18:48:58 -0500 Subject: [PATCH 03/37] Checkboxradio: add test suit --- demos/button/checkbox.html | 4 +- tests/unit/checkboxradio/checkboxradio.html | 69 +++++++++ .../checkboxradio/checkboxradio_common.js | 9 ++ .../unit/checkboxradio/checkboxradio_core.js | 143 ++++++++++++++++++ tests/unit/controlgroup/controlgroup_core.js | 0 ui/checkboxradio.js | 28 ++-- 6 files changed, 237 insertions(+), 16 deletions(-) create mode 100644 tests/unit/checkboxradio/checkboxradio.html create mode 100644 tests/unit/checkboxradio/checkboxradio_common.js create mode 100644 tests/unit/checkboxradio/checkboxradio_core.js create mode 100644 tests/unit/controlgroup/controlgroup_core.js diff --git a/demos/button/checkbox.html b/demos/button/checkbox.html index 771a81d9b8c..3a09c3e6941 100644 --- a/demos/button/checkbox.html +++ b/demos/button/checkbox.html @@ -68,9 +68,9 @@ Checkbox widget sample Checkbox widget sample - + Radio widget sample - Radio widget sample 2 + Radio widget sample 2 Reset

+ + +

+

+ Choice 1 + Choice 2 + Choice 3 +

+

+

+

+ Choice 1 + Choice 2 + Choice 3 +

+

+

+

+ Choice 1 + Choice 2 + Choice 3 +

+

+ +Toggle +Checkbox + +