CODEWITHSUNDEEP
cssreactjsmaterial-ui
Carlos Franco
Carlos Franco

Reputation: 58

Material-UI Radio Button with svg circle

Hello guys i'm trying to customize the Material-UI radio button using CSS modules and I haven't been able to have much success, it seems like the easier way to do it would be to use the makeStyles function from Material-UI but I am supposed to be using CSS modules.

So this is this is the standard Material-UI radio button:

Radio Button

Basically I have to make this: Radio button design.

Material-UI doesn't have the check mark available but I am sure that I can do it somehow with SVG but I just cant seem to figure out how to do it. If someone can please help or point me in the right direction I would greatly appreciate it.

UPDATE: It turns out I could just inject a SVG as a component using the Radio component's checkedIcon property which I found on Material-UI icons, here is the documentation.

That only met my needs for the checked 'Active' part that I needed, then I was struggling with the 'Hover' part for while thinking I had to use a SVG for that when all I really needed to do was to draw a circle using ::before or ::after to create a pseudo element and styling it to be a circle withing the main circle, same thing witht the 'Focus' part.

Upvotes: 2

Views: 12792

Answers (2)

Jan P
Jan P

Reputation: 866

You can simply use the icon and checkedIcon properties of the Checkbox component (https://material-ui.com/api/checkbox/#props) and pass in any kind of component rendering your SVG.

Edit: I stated a little demo (based on the Material-UI checkbox demo) with CSS Modules, since the initial answer did not meet all your requirements (e.g. missing an example for focus). It is also not looking too nice, but I think it should help showing the idea behind it (focus should be similar to the hover example).

Component:

import React from 'react';
// webpack, parcel or else will inject the CSS into the page
import styles from './CssModulesCheckboxes.css';
import Checkbox from '@material-ui/core/Checkbox';

function StyledCheckbox(props) {
  return (
    <Checkbox
      checkedIcon={<span className={styles.checkedIcon} />}
      icon={<span className={styles.icon} />}
      inputProps={{ 'aria-label': 'decorative checkbox' }}
      {...props}
    />
  );
}

export default function CssModulesButton() {
  return (
    <div>
      <StyledCheckbox />
      <StyledCheckbox defaultChecked />
      <StyledCheckbox defaultChecked disabled />
    </div>
  );
}

CSS module:

.icon {
  border-radius: 3px;
  width: 16px;
  height: 16px;
  box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 -1px 0 rgba(16, 22, 26, 0.1);
  background-color: #f5f8fa;
  background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.8), hsla(0, 0%, 100%, 0));
}

input:hover ~ .icon {
  background-color: #137cbd;
  background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0));
}

input:hover ~ .icon::before {
  display: block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23aaa'/%3E%3C/svg%3E");
  content: '';
}

.checkedIcon {
  background-color: #137cbd;
  background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0));
}

.checkedIcon::before {
  display: block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E");
  content: '';
}

input:disabled ~ .checkedIcon {
  box-shadow: none;
  background: rgba(206, 217, 224, 0.5);
}

Sample running in codesandbox: https://codesandbox.io/s/css-modules-vdbi8

Upvotes: 6

Pascut
Pascut

Reputation: 3434

Try the following code:

HTML:

<div>
  <input type="radio" name="my-radio" id="radio-option-1"/>
  <label for="radio-option-1"> <span></span> Pick Me </label>
</div>

<div>
  <input type="radio" name="my-radio" id="radio-option-2"/>
  <label for="radio-option-2"> <span></span> Pick Me 2</label>
</div>

<div>
  <input type="radio" name="my-radio" id="radio-option-3" active/>
  <label for="radio-option-3"> <span></span> Pick Me 3 (Active)</label>
</div>

<div>
  <input type="radio" name="my-radio" id="radio-option-4" disabled/>
  <label for="radio-option-4"> <span></span> Pick Me 4 (Inactive)</label>
</div>

CSS:

input[type="radio"] {
    display: none;
}

label {
  cursor:pointer;
  color: #555;
}

input[type="radio"] + label span {
    display: inline-block;
    vertical-align: middle;
    width: 45px;
    height: 45px;
    border: 2px solid #ff0000;
    border-radius: 10px;
    background-color: #ffffff;
    text-align: center;
}

input[type="radio"][disabled] + label span {
  background-color: #ececec;
  border: #ececec;
}

input[type="radio"][active] + label span {
   background-color: #ff0000;
}
input[type="radio"][active] + label span:hover {
  background-color: #ff0000;
  border: 2px solid #ff0000;
}

/* input[type="radio"] + label span:hover {
  text-align: center;
  vertical-align: bottom;
} */

input[type="radio"] + label span:focus {
  background-color: #ffffff;
}
input[type="radio"]:not([active]):not([disabled]):not(:checked) + label span:focus::before {
   content: '';
   display: inline-block;
   width: 70%;
   height: 70%;
   border-radius: 50%;
   background-color: #ff0000;
   border: 2px solid #ff0000;
   margin-top: calc(100% - 76%);
}

input[type="radio"]:not([active]):not([disabled]):not(:checked) + label span:hover::before {
   content: '';
   display: inline-block;
   width: 70%;
   height: 70%;
   border-radius: 50%;
   background-color: #ffffff;
   border: 2px solid #ff0000;
   margin-top: calc(100% - 85%);
}

input[type="radio"] + label span  {
  border-radius: 50%;
}

input[type="radio"][disabled] + label span::before,
input[type="radio"][active] + label span::before,
input[type="radio"]:checked + label span::before {
   content: "✓";
   color: #ffffff;
   text-align: center;
   font-size: 40px;
}

input[type="radio"]:checked + label span {
    background-color: #ff0000;
    text-align: center;
}

Demo: https://jsfiddle.net/40ktw6jv/58/

Upvotes: 0

Related Questions