Note: These selectors apply only to forms using the Orbital theme. If you are using the Gravity Forms 2.5 theme, see the Legacy CSS Selectors documentation.
The Multiple Choice field combines the functionality of the checkbox and radio fields into a single field.
The Selection option determines how it renders: Select One renders as radio buttons, and Select Multiple, Select Exact Number, and Select a Range render as checkboxes.
In Orbital, the structure uses div.gfield_checkbox or div.gfield_radio as the list container and div.gchoice for each item (not ul/li as in the legacy theme).
Radio and checkbox inputs are browser-native elements. Their appearance may vary across browsers, devices, and operating systems, and full customization via CSS alone may be limited.
Container
The Multiple Choice field uses the standard field structure:
- .gfield
- .gfield–type-multi_choice
- .ginput_container_radio (Select One)
- .ginput_container_checkbox (Select Multiple)
The field has an id attribute in the format field_{form_id}_{field_id} (e.g. field_5_3 for form 5, field 3).
Use the input container when targeting container layout or padding.
.gform-theme--framework .gfield--type-multi_choice .ginput_container_radio {
background-color: #f9f9f9;
border: 1px solid #e5e7eb;
border-radius: 6px;
padding: 12px;
}
.gform-theme--framework .gfield--type-multi_choice .ginput_container_checkbox {
background-color: #f9f9f9;
border: 1px solid #e5e7eb;
border-radius: 6px;
padding: 12px;
}
.gform-theme--framework#gform_wrapper_1926 .gfield--type-multi_choice .ginput_container_radio,
.gform-theme--framework#gform_wrapper_1926 .gfield--type-multi_choice .ginput_container_checkbox {
background-color: #f9f9f9;
border: 1px solid #e5e7eb;
border-radius: 6px;
padding: 12px;
}
Choice Layout & Styling
Spacing between choices, label styling, and other layout options use CSS variables that cascade from the parent. Set them on .gfield–type-multi_choice.
.gform-theme--framework .gfield--type-multi_choice {
--gf-field-choice-gap: 16px;
--gf-ctrl-label-color-secondary: #1a365d;
--gf-ctrl-label-font-size-secondary: 16px;
}
.gform-theme--framework#gform_wrapper_112 .gfield--type-multi_choice {
--gf-field-choice-gap: 20px;
--gf-ctrl-label-color-secondary: #112337;
--gf-ctrl-label-font-size-secondary: 18px;
}
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
--gf-field-choice-gap: 12px;
--gf-ctrl-label-color-secondary: #0f172a;
}
To apply different values for radio vs checkbox modes:
.gform-theme--framework .gfield--type-multi_choice .gfield_radio {
--gf-field-choice-gap: 20px;
}
.gform-theme--framework .gfield--type-multi_choice .gfield_checkbox {
--gf-field-choice-gap: 12px;
}
Choice Items (.gchoice)
Each choice is wrapped in div.gchoice. The class gchoice_{form_id}{field_id}{choice_number} is also present for targeting individual choices.
.gform-theme--framework .gfield--type-multi_choice .gchoice {
padding: 4px 0;
}
.gform-theme--framework#gform_wrapper_112 .gfield--type-multi_choice .gchoice {
padding: 6px 0;
margin-bottom: 4px;
}
Inputs (Radio Mode – Select One)
When configured as Select One, the field renders radio inputs.
.gform-theme--framework .gfield--type-multi_choice {
--gf-ctrl-choice-size: 20px;
--gf-ctrl-radio-check-size: 7px;
--gf-ctrl-radio-check-radius: 50%;
}
.gform-theme--framework#gform_wrapper_112 .gfield--type-multi_choice {
--gf-ctrl-choice-size: 22px;
--gf-ctrl-radio-check-size: 8px;
}
Inputs (Checkbox Mode – Select Multiple)
When configured as Select Multiple, Select Exact Number, or Select a Range, the field renders checkbox inputs.
.gform-theme--framework .gfield--type-multi_choice {
--gf-ctrl-choice-size: 20px;
--gf-ctrl-checkbox-check-size: 14px;
}
.gform-theme--framework#gform_wrapper_112 .gfield--type-multi_choice {
--gf-ctrl-choice-size: 18px;
--gf-ctrl-checkbox-check-size: 12px;
}
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
--gf-ctrl-choice-size: 20px;
--gf-ctrl-checkbox-check-size: 16px;
}
Note: Radio and checkbox inputs are generated by the browser, not Gravity Forms. Their appearance may vary depending on the browser, device, and operating system.
Field Label
The main field label uses .gform-field-label.
.gform-theme--framework .gfield--type-multi_choice {
--gf-ctrl-label-color-primary: #1a365d;
--gf-ctrl-label-font-size-primary: 16px;
}
.gform-theme--framework#gform_wrapper_112 .gfield--type-multi_choice {
--gf-ctrl-label-color-primary: #112337;
--gf-ctrl-label-font-size-primary: 18px;
}
Field Description
.gform-theme--framework .gfield--type-multi_choice {
--gf-ctrl-desc-color: #6b7280;
--gf-ctrl-desc-font-size: 14px;
}
Select All (Checkbox Mode Only)
When Enable Select All is enabled:
.gform-theme--framework .gfield--type-multi_choice .gchoice_select_all {
--gf-ctrl-label-color-secondary: #1a365d;
padding-bottom: 8px;
margin-bottom: 4px;
border-bottom: 1px solid #e5e7eb;
}
.gform-theme--framework#gform_wrapper_112 .gfield--type-multi_choice .gchoice_select_all .gform-field-label {
--gf-ctrl-label-font-size-secondary: 15px;
}
Other Choice (Radio Mode Only)
.gform-theme--framework .gfield--type-multi_choice .gchoice_other_control {
--gf-field-choice-other-ctrl-max-width: 256px;
}
.gform-theme--framework#gform_wrapper_112 .gfield--type-multi_choice .gchoice_other_control {
--gf-field-choice-other-ctrl-max-width: 200px;
}
Choice Limit Message
.gform-theme--framework .gfield--type-multi_choice .gfield_choice_limit_message {
--gf-ctrl-desc-color: #6b7280;
--gf-ctrl-desc-font-size: 14px;
}
.gform-theme--framework .gfield--type-multi_choice .gfield_choice_limit_message.validation_message {
--gf-ctrl-desc-color: #c02b0a;
}
Choice Alignment
.gform-theme--framework .gfield--type-multi_choice.gfield--choice-align-horizontal .gfield_radio,
.gform-theme--framework .gfield--type-multi_choice.gfield--choice-align-horizontal .gfield_checkbox {
--gf-field-choice-align-x-gap-y: 12px;
--gf-field-choice-align-x-gap-x: 16px;
}
Use Case Examples
Increased Spacing
.gform-theme--framework .gfield--type-multi_choice .gfield_radio,
.gform-theme--framework .gfield--type-multi_choice .gfield_checkbox {
--gf-field-choice-gap: 24px;
}
Larger Radio Inputs
.gform-theme--framework .gfield--type-multi_choice {
--gf-ctrl-choice-size: 22px;
--gf-ctrl-radio-check-size: 8px;
}
Larger Checkbox Inputs
.gform-theme--framework .gfield--type-multi_choice {
--gf-ctrl-choice-size: 24px;
--gf-ctrl-checkbox-check-size: 16px;
}
Compact Layout on Specific Page
.page-id-571 .gform-theme--framework .gfield--type-multi_choice {
--gf-ctrl-label-font-size-secondary: 14px;
--gf-field-choice-gap: 8px;
}
Targeting a Specific Field
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
--gf-ctrl-label-color-primary: #0f172a;
--gf-ctrl-label-color-secondary: #334155;
--gf-field-choice-gap: 12px;
}
Custom Accent Color
.gform-theme--framework#gform_wrapper_112 .gfield--type-multi_choice {
--gf-ctrl-accent-color: #204ce5;
--gf-ctrl-choice-check-color: #204ce5;
}
CSS API Reference
For full variable definitions, see the separate CSS API documentation.