3

I am using Office fabric Choice Group for my radio buttons. I would like to change the styling of part of text to bold, but the rest of text remains as normal font size. I am using onRenderField method but I have not successfully implemented yet.... I really appreciate any inputs!!

Final Goal for radio button text:

On: some additional explanation here

Example Code using onRenderField method:

options={[
  {
    key: 'On', 
    text: 'On: some additional explanation here', 
    onRenderField: (props, render) => {
      return (
        <span style={{fontWeight: 'bold'}}>
          {render!(props)}
        </span>
      );
    }
  }
]}

The above code makes bold entire text like below:

On: some additional explanation here

M.B
  • 37
  • 6

1 Answers1

3

There's an option that doesn't appear to be well-documented called onRenderLabel that will do what you need.

Using it looks like:

{
  key: 'C',
  text: 'Option C',
  onRenderLabel: (p) => <span id={p.labelId} className="ms-ChoiceFieldLabel">Option C: only <strong>this part</strong> is bold</span>
}

The p in the callback is of type IChoiceGroupOptionProps and may be of use, though it's more likely that defining the entire render inline is easier. ( https://learn.microsoft.com/en-us/javascript/api/office-ui-fabric-react/ichoicegroupoptionprops?view=office-ui-fabric-react-latest )

JD Huntington
  • 348
  • 1
  • 5
  • Working example (along with some other override styles shown) at https://codepen.io/jdh-msft/pen/bGEGeRV?editors=0010 – JD Huntington Jun 02 '20 at 22:21
  • Hi JD! Thank you for the suggestion! I could achieve what I wanted using onRenderLabel! Could you let me know how you could identify the right className for the label..? I thought I needed to create a custom styling for label but `className="ms-ChoiceFieldLabel"' worked perfectly. – M.B Jun 03 '20 at 15:33
  • I found this by looking at the source directly. Unfortunately I don't know of a better way! In this case, the classname is baked right into the component: https://github.com/microsoft/fluentui/blob/a6523e210c0a534e81a2ead3a6135d51dbc263b6/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.base.tsx#L146 – JD Huntington Jun 03 '20 at 16:55
  • Thank you! That is really helpful :) – M.B Jun 04 '20 at 17:37