{"id":5978,"date":"2024-04-14T20:00:20","date_gmt":"2024-04-14T12:00:20","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5978"},"modified":"2024-04-14T20:00:20","modified_gmt":"2024-04-14T12:00:20","slug":"options-selection-buttons-and-dropdown-lists","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/options-selection-buttons-and-dropdown-lists\/","title":{"rendered":"Options, selection buttons, and dropdown lists"},"content":{"rendered":"\n
\n

When constructing surveys, forms, or anything that necessitates a visitor’s input, you can utilize checkboxes, radio buttons, and select menus.<\/p>\n

This tutorial covers:<\/p>\n

    \n
  1. Options with checkboxes<\/li>\n
  2. Radio buttons<\/li>\n
  3. Selection dropdown lists<\/li>\n
  4. Personalizing checkboxes and radio buttons<\/li>\n<\/ol>\n

    Remember that all form elements (namely checkboxes, radio buttons, and select menus) should be placed within a form block.<\/p>\n

    Checkboxes<\/h2>\n

    Checkboxes enable visitors to select multiple options.<\/p>\n

    You can adjust checkbox settings in the Settings panel<\/strong> under Checkbox options<\/strong>.<\/p>\n

      \n
    • Label<\/strong> \u2014 It is advisable to assign labels to checkboxes for easier identification in form data<\/li>\n
    • Appearance<\/strong> \u2014 Customize the checkbox appearance either as a default style or as per your preferences<\/li>\n
    • Mandatory<\/strong> \u2014 Designates a checkbox as a required form field. For instance, the “I accept the terms and conditions” checkbox can be set as mandatory<\/li>\n
    • Initially selected<\/strong> \u2014 The checkbox is initially checked by default<\/li>\n<\/ul>\n

      Radio buttons<\/h2>\n

      Radio buttons allow visitors to pick a single option from a group of options.<\/p>\n

      You can configure radio button settings in the Settings panel<\/strong> under Radio button options<\/strong>.<\/p>\n

        \n
      • Group title<\/strong> \u2014 Names the radio button group. For example, if visitors choose their favorite color, “Favorite color” would be the group title for each color option<\/li>\n
      • Option value<\/strong> \u2014 Specifies the value when the radio button is selected. For example, for the “Red” option, the value would be “Red”. Note that the option value is separate from the label displayed on the button<\/li>\n
      • Appearance<\/strong> \u2014 Customize the radio button appearance as default or to suit your style<\/li>\n
      • Mandatory<\/strong> \u2014 Defines the radio button as a required form element. Only one radio button in a group needs to be mandatory for the entire group to be required<\/li>\n<\/ul>\n

        Note: <\/strong>If a radio button is marked as mandatory but lacks a Group title<\/strong>, that specific radio button must be selected before form submission.<\/p><\/blockquote>\n

        Dropdown lists<\/h2>\n

        Dropdown lists offer a range of choices for selection. To configure select menu settings, go to the Settings panel<\/strong> under Select field options<\/strong>.<\/p>\n

          \n
        • Label<\/strong> \u2014 Assign labels to select menus for better identification in form data<\/li>\n
        • Options<\/strong> \u2014 Use the “plus” icon to add new options to the select menu. Set the displayed label in the Text field and the value in the Value field. Edit, delete, or reorder options using the respective icons<\/li>\n
        • Mandatory<\/strong> \u2014 Marks the select menu as a required form element<\/li>\n
        • Allow multiple choices<\/strong> \u2014 Enables visitors to select multiple options. Visitors can use Command<\/strong> + Click<\/strong> (on Mac) or Control<\/strong> + Click<\/strong> (on Windows) to make multiple selections<\/li>\n<\/ul>\n

          Personalizing checkboxes and radio buttons<\/h2>\n

          For custom styling of checkboxes or radio buttons, select the element on the canvas, access the Settings panel<\/strong>, and choose “Custom” under Appearance<\/strong>.<\/p>\n

          You can then tailor the elements using the Style panel<\/strong>. To revert to the default style, select “Default” under Appearance<\/strong>.<\/p>\n

          Tip:<\/strong> When applying custom styles and reusing the same class on other checkboxes or radio buttons, ensure to select “Custom” under Style<\/strong> for the new elements as well.<\/h6>\n

          Customize the “selected” state<\/h3>\n

          Once you customize checkboxes or radio buttons, you can style them in various states, including a custom selected<\/strong> state. This allows control over the appearance when an element is chosen.<\/p>\n

          Tip:<\/strong> To maintain accessibility for keyboard navigation in forms, checkboxes and radio buttons highlight with a default blue shadow when focused.<\/h6>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Configure checkboxes, radio buttons, and select inputs.","protected":false},"author":2,"featured_media":5160,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[290],"tags":[],"class_list":{"0":"post-5978","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-elements","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5978","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=5978"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5978\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5320"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5978"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5978"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5978"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}