VOOZH about

URL: https://www.geeksforgeeks.org/css/pure-css-checkboxes-and-radio-buttons/

⇱ Pure CSS Checkboxes and Radio Buttons - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

Pure CSS Checkboxes and Radio Buttons

Last Updated : 23 Jul, 2025

In Pure CSS, we do not have any particular layout for Checkboxes and Radio Button type inputs. But we can use those types of inputs by using the Pure CSS classes. The below-mentioned classes are used for checkboxes and radio buttons.

  • Checkbox: To use checkboxes, we can apply the input tag inside of a label tag and use the pure-checkbox class inside of the label tag.
  • Radio Button: To use checkboxes, we can apply the input tag inside of a label tag and use the pure-radio class inside of the label tag.

Example 1: In this example, we will see the check box by Pure CSS. The below example illustrates the Check-box and Radio Button in Pure CSS.

Output:

👁 Image

Example 2: In this example, we will see the radio buttons.

Output:

👁 Image
Comment