---
title: "Style Radio & Checkbox Fields"
url: https://docs.coolplugins.net/doc/style-radio-checkbox-elementor-form/
date: 2025-06-02
modified: 2026-03-02
author: "Satinder Singh"
description: "Radio and Checkbox fields let users select options in a form. Radio buttons are used when users should pick only one option from a list (e.g., Yes/No, Male/Female), while Checkboxes..."
categories:
  - "Cool FormKit for Elementor"
word_count: 232
---

# Style Radio & Checkbox Fields

**Radio** and **Checkbox** fields let users select options in a form. Radio buttons are used when users should pick only one option from a list (e.g., Yes/No, Male/Female), while Checkboxes allow selecting multiple options at once (e.g., selecting multiple services or interests).

https://youtu.be/_mQlwemuaZY

## What are Radio & Checkbox Fields?

Imagine you're building an online survey form, a radio field asking: “How did you hear about us?” with options like “Google,” “Social Media,” or “Friend.” While a checkbox field could follow up with: “Which services are you interested in?” with multiple checkable options like “Web Design,” “SEO,” and “Hosting.”

Follow these simple steps to add Radio & Checkbox Field to Elementor forms:

## Add Radio & Checkbox Inputs

* Firstly, make sure you have **“*Turned on*“** the [Radio & Checkbox Styler](https://coolformkit.com/features/checkbox-radio-styles-for-elementor-form/) feature in the **WordPress Admin Panel >> Elementor >> Cool FormKit >> Form Elements Tab.**

- Navigate to the **Content** section of your **Form Field**. From the **Field Type** dropdown, select **Radio & Checkbox Fields**.

[![radio & checkbox field type](https://docs.coolplugins.net/wp-content/uploads/2025/06/radio-checkbox-field-type.jpg)](https://docs.coolplugins.net/wp-content/uploads/2025/06/radio-checkbox-field-type.jpg)

## Customization

Once you’ve selected the Radio & Checkbox Fields, you can customize its appearance using the following options:

[![radio & checkbox customization](https://docs.coolplugins.net/wp-content/uploads/2025/06/radio-checkbox-customization.jpg)](https://docs.coolplugins.net/wp-content/uploads/2025/06/radio-checkbox-customization.jpg)

- Choose a preferred style option from the style dropdown.

- The following style controls will appear:

**Size:** Adjust the size of the radio & checkbox icon.

- **Unselected Color**: Select the color that will display on the radio & checkbox icon as default unselected option.

- **Selected Color**: Select the color that will display on the radio & checkbox icon as the selected option.