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
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 )