The Radio design options control how radio button inputs look inside Divi 5 modules that include them. These settings cover the typography of the radio option text, the selection icon, spacing, background, border, and box shadow for the radio button container.
Where to Find the Radio Options
Open the Module Settings: Click the gear icon or the module itself to access its settings.
Navigate to the Design Tab: Locate the Radio option group.
Radio Customization Settings
Input Text
Controls the typography of the text that appears next to each radio button option.
Fields Font: Choose a font from the dropdown or upload a custom font for unique styling.
Fields Font Weight: Adjust the boldness of your Fields with options like light, bold, or extra-bold.
Variable Font Options: those options will only be available if you are using a Google variable font such as Robo, Google Sans Flex, or Bitcount):
Variable Font Weight: Use the slider or type in a numeric value for the font weight.
Optical Sizing: Enable automatic optical size handling.
Variable Font Width: Fine-tune variable font width using variable font interpolation.
Variable Font Slant: Fine-tune variable font slant using variable font interpolation.
Variable Font Crsv: Fine-tune variable font crsv using variable font interpolation.
Variable Font Element Shape: Fine-tune variable font element shape using variable font interpolation.
Variable Font Element Expansion: Fine-tune variable font element expansion using variable font interpolation.
Variable Font Rond: Fine-tune variable font rond using variable font interpolation.
Variable Font Grade: Fine-tune variable font grade using variable font interpolation.
Variable Font Width: Fine-tune variable font width using variable font interpolation.
Fields Text Size: You can adjust the font size of your Fields text using the slider or by entering a specific value. It also accepts Global Variables.
Fields Text Color: Choose a color to be used for the Fields text. It also accepts Global Variables.
Fields Line Height: Set the space between the lines of the Fields text, helping to improve readability. It also accepts Global Variables.
Fields Letter Spacing: Control the space between letters by adjusting the slider or entering a value. It also accepts Global Variables.
Fields Text Alignment: Set the alignment for the Fields text—left, center, right, or justified.
Fields Capitalization: Choose the Fields text's capitalization:
Uppercase - All letters are in uppercase format
Capitalize - Makes the first letter of each word uppercase.
Lowercase - All letters are in lowercase format.
Smallcaps - Lowercase letters display as smaller uppercase letters.
All Small Caps - all letters display as small caps, including letters that were already uppercase.
Fields Font Style: Select additional font styles, including:
Italic: Makes the text lean to the right.
Underline: Adds a line under the text.
Overline: adds a line above the text.
Strikethrough: draws a line through the middle of the text.
⚠️ Note: When Underline, Overline, and/or Strikethrough are enabled, you can also choose:Line Color: Choose the line's color. It also accepts Global Variables.
Line Thickness: Choose how thick or slim the line is.
Line Type: Choose the Line's type:
Solid
Double
Dotted
Dashed
Wavy
Fields Line Warp Style: Choose how text should wrap. Default keeps native browser wrapping, Balanced evens heading lines, and Pretty helps avoid single-word endings.
Default: Text can move onto a new line when it runs out of space.
Balanced: Short text breaks into lines with more even lengths
Pretty: Text wrap in a cleaner, more visually pleasing way
Fields Text Direction: Choose text flow direction. Standard Horizontal reads left-to-right across lines, while vertical modes stack glyphs top-to-bottom.
Standard Horizontal
Vertical (right to left): The text is displayed from top to bottom, and each new line starts to the left of the previous one.
Vertical (left to right): The text is displayed from bottom to top, and each new line starts to the left of the previous one.
Fields Hyphenation: When enabled, if a word is too long to fit nicely on one line, the browser can break it into parts and add a hyphen at the break.
Fields Fill Type: Choose the Fields's text fill options:
None - No Fields text fill.
Gradient - Fill the Fields text with a Gradient
Image - Fill the Fields text with an Image
Transparent - Fill the Fields text with a transparent fill.
Fields Stroke Width - Choose the thickness of the stroke.
Fields Stroke Color - Choose the Fields text's stroke color.
Fields Columns: Set how many columns the text should flow through.
Fields Text Shadow: Add a text shadow effect and customize its direction, blur, and color to add depth or emphasis to the Fields:
Direction: Adjust horizontal and vertical placement.
Blur: Control how soft or sharp the shadow appears.
Color: Set a shadow color to complement the text.
Spacing
Controls the space around and inside each radio button.
Fields Margin: Add space outside the radio button on the top, right, bottom, and left.
Fields Padding: Add space inside the radio button (between the icon and the button edges) on the top, right, bottom, and left.
Click the chainlink icon to lock opposing sides together for uniform spacing.
Icon
Controls the indicator that appears inside a selected radio button.
Fields Icon Color: Set the color of the selection icon. Pick a static color or assign a global color variable.
Field Icon: Choose the icon shown when a radio button is selected. Select from the ET icon library or the Font Awesome library.
Use Custom Field Icon Size: Toggle on to override the default icon size. When enabled, a size slider appears so you can set a custom value using any supported unit.
Background
Controls the appearance of the radio button background. Divi 5 offers six background types, each available as its own tab. You can combine them (for example, a color base with a pattern on top).
Background Color: Apply a solid color fill.
Background Gradient: Apply a multi-stop gradient with control over direction, type (linear or radial), and color stops.
Background Image: Upload or link an image and adjust size, position, repeat, and blend mode.
Background Video: Embed an MP4 or WebM video as a looping background.
Background Mask: Apply a pre-built mask shape over the background for layered visual effects.
Background Pattern: Overlay a repeating pattern on top of the background.
Border
Controls the shape and edge of the radio button container.
Fields Rounded Corners: Set the corner radius. Keep the chainlink icon locked for uniform corners or unlink it to round each corner independently. Radio buttons are traditionally circular, so keeping a high corner radius across all four corners preserves the expected shape.
Fields Border Styles: Configure the border appearance:
Border Width: Define the border thickness (minimum
1px).Border Color: Pick a static color or assign a global color variable.
Border Style: Choose solid, dashed, dotted, double, groove, ridge, inset, outset, or none.
Box Shadow
Adds a drop shadow around the radio button container to create depth. Pick from a library of preset shadow styles, or customize each property manually.
Horizontal Position: Move the shadow left or right of the radio button.
Vertical Position: Move the shadow up or down from the radio button.
Blur Strength: Soften or sharpen the shadow edges.
Spread Strength: Expand or contract the shadow's reach.
Shadow Color: Pick a static color or assign a global color variable.
Tips for Using Radio Options
Match Form Typography: Keep Input Text font, weight, and size consistent with the rest of your form fields so radio buttons read as part of the same group.
Use Global Colors: Assign global color variables to Fields Icon Color and Border Color so sitewide palette changes update radio buttons automatically.
Preserve the Circle: Users recognize radio buttons as round. Keep Fields Rounded Corners high on all sides unless you're intentionally styling against convention.
Pick a Recognizable Selection Icon: A filled dot or solid circle from the ET or Font Awesome libraries reads most clearly as "selected" at small sizes.
Size Icons Proportionally: When enabling Use Custom Field Icon Size, keep the icon smaller than the radio button container so it sits cleanly inside.
Keep Tap Targets Generous: Use Fields Padding and Fields Margin to give radio buttons enough space for easy tapping on mobile devices.
Ensure Contrast: Check that the icon color contrasts clearly with the radio button background so the selected state is obvious at a glance.