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 Radio Buttons field renders a list of choices with a radio input for each, allowing users to select one option.
In Orbital, the structure uses div.gfield_radio as the list container and div.gchoice for each item (not ul/li as in the legacy theme).
Radio inputs are browser-native elements. Their appearance may vary across browsers, devices, and operating systems, and full customization via CSS alone may be limited.
For full variable definitions, see the separate CSS API documentation.
Container
The radio field uses the standard field structure:
- .gfield
- .gfield–type-radio
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 .ginput_container_radio when targeting container layout or padding.
.gform-theme--framework .gfield--type-radio {
background-color: #f9f9f9;
border: 1px solid #e5e7eb;
border-radius: 6px;
padding: 12px;
}
.gform-theme--framework#gform_wrapper_112 .gfield--type-radio {
background-color: #f9f9f9;
border: 1px solid #e5e7eb;
border-radius: 6px;
padding: 12px;
}
List
The .gfield_radio element is the list container for all radio choices. In Orbital it is a div. The legacy theme used an unordered list (ul).
Use it to control spacing between choices.
.gform-theme--framework .gfield--type-radio .gfield_radio {
--gf-field-choice-gap: 16px;
}
.gform-theme--framework#gform_wrapper_112 .gfield--type-radio .gfield_radio {
--gf-field-choice-gap: 20px;
}
.gform-theme--framework#gform_wrapper_112 #field_112_4 .gfield_radio {
--gf-field-choice-gap: 12px;
}
Items
Each radio choice is wrapped in div.gchoice.
The class gchoice_{form_id}{field_id}{choice_number} is also present for targeting individual choices when needed.
.gform-theme--framework .gfield--type-radio .gchoice {
padding: 4px 0;
}
.gform-theme--framework#gform_wrapper_112 .gfield--type-radio .gchoice {
margin-bottom: 8px;
}
Labels
Radio choice labels use:
- .gform-field-label
- .gform-field-label–type-inline
Override –gf-ctrl-label-color-secondary and –gf-ctrl-label-font-size-secondary on the field scope for choice label styling. These apply to labels within choices, not the main field label.
.gform-theme--framework .gfield--type-radio {
--gf-ctrl-label-color-secondary: #1a365d;
--gf-ctrl-label-font-size-secondary: 16px;
}
.gform-theme--framework#gform_wrapper_112 .gfield--type-radio {
--gf-ctrl-label-color-secondary: #112337;
--gf-ctrl-label-font-size-secondary: 18px;
}
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
--gf-ctrl-label-color-secondary: #0f172a;
}
Inputs
Radio inputs use input.gfield-choice-input with type=”radio”. They are browser-native elements. Appearance varies by browser, device, and operating system, and full CSS customization is limited.
Use –gf-ctrl-choice-size for the outer control size. For the inner checked indicator (dot), use:
- –gf-ctrl-radio-check-size
- –gf-ctrl-radio-check-radius
The checked color uses –gf-ctrl-choice-check-color.
.gform-theme--framework .gfield--type-radio {
--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-radio {
--gf-ctrl-choice-size: 22px;
--gf-ctrl-radio-check-size: 8px;
}
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
--gf-ctrl-choice-size: 20px;
--gf-ctrl-radio-check-size: 7px;
}
Note: Radio inputs are generated by the browser, not Gravity Forms. They may look different depending on the browser, device, and operating system. You may not be able to fully customize them with CSS alone as with other form elements.
Field Label
The main field label uses the standard .gform-field-label. Override –gf-ctrl-label-color-primary and –gf-ctrl-label-font-size-primary on .gfield–type-radio.
.gform-theme--framework .gfield--type-radio {
--gf-ctrl-label-color-primary: #1a365d;
--gf-ctrl-label-font-size-primary: 16px;
}
.gform-theme--framework#gform_wrapper_112 .gfield--type-radio {
--gf-ctrl-label-color-primary: #112337;
--gf-ctrl-label-font-size-primary: 18px;
}
Field Description
When a description is set, it appears above or below the choices, depending on the form’s description placement.
Use –gf-ctrl-desc-color and –gf-ctrl-desc-font-size.
.gform-theme--framework .gfield--type-radio {
--gf-ctrl-desc-color: #6b7280;
--gf-ctrl-desc-font-size: 14px;
}
Other Choice
When “Enable ‘Other’ Choice” is on, a text input appears in .gchoice_other_control for the “Other” option. Use –gf-field-choice-other-ctrl-max-width to control its width.
.gform-theme--framework .gfield--type-radio .gchoice_other_control {
--gf-field-choice-other-ctrl-max-width: 256px;
}
.gform-theme--framework#gform_wrapper_112 .gfield--type-radio .gchoice_other_control {
--gf-field-choice-other-ctrl-max-width: 200px;
}
Use Case Examples
Radio List with Increased Spacing
.gform-theme--framework .gfield--type-radio .gfield_radio {
--gf-field-choice-gap: 24px;
}
.gform-theme--framework#gform_wrapper_112 .gfield--type-radio .gfield_radio {
--gf-field-choice-gap: 24px;
}
Larger Radio Inputs
.gform-theme--framework .gfield--type-radio {
--gf-ctrl-choice-size: 22px;
--gf-ctrl-radio-check-size: 8px;
}
Horizontal Radio Layout
When “Display choices in multiple columns” or horizontal alignment is enabled, the list uses –gf-field-choice-align-x-gap-y and –gf-field-choice-align-x-gap-x for spacing.
.gform-theme--framework .gfield--type-radio.gfield--choice-align-horizontal .gfield_radio {
--gf-field-choice-align-x-gap-y: 12px;
--gf-field-choice-align-x-gap-x: 16px;
}
Targeting a Specific Radio 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 for Radio Inputs
css
.gform-theme--framework#gform_wrapper_112 .gfield--type-radio {
--gf-ctrl-choice-check-color: #204ce5;
}
CSS API Reference
For full variable definitions, see the separate CSS API documentation.