Fluent UI - Change checkbox from square to circle

Question

I need to change the checkbox input from Fluent UI from a square to a circle. I want the checkbox to look like the checkbox used in the DetailsList. I already figured out how to change the checkmark, but I was not able to change the input with type checkbox.

Here is how I changed the checkmark. I expected it to be the same with the input, but it does not work.

<Checkbox checkmarkIconProps={{ iconName: "StatusCircleCheckmark" }} inputProps={{ iconProps: "CircleRing" }}/>

Marko Savic · Accepted Answer · 2021-12-17T15:20:49.797

You can change it trough styles and checkbox prop:

<Checkbox
  styles={{ checkbox: { borderRadius: '100%' } }}
/>

Solution from Jul:

const checkStyles = {
  checkbox: { 
    borderRadius: "100%",
    height: "17px",
    width: "17px"
  }, 
  checkmark: {
    fontSize: "16px",
    position: "absolute",
    top: "-1px",
    width: "17px",
    height: "15px",
    textAlign: "center",
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    verticalAlign: "middle",
    left: "0.2px"
  }
};

<Checkbox
  className="cardcheckbox"
  styles={checkStyles}
  checkmarkIconProps={{ iconName: "StatusCircleCheckmark" }}
  onChange={handleCheckboxAllChange}
  checked={checked}
/>

Codepen working example.

Fluent UI - Change checkbox from square to circle

1 Answers1