0

I use Fabric components written in React + Typescript and when using Checkbox component I can add custom attributes such as data-id and so on - this is written also on documentation: https://developer.microsoft.com/en-us/fabric#/components/checkbox

Whats the problem ? I do not know how to add one by passing it to inputProps.

Interface of React HTMLAttribute for field data require string value.

From what I see there interface of React's HTMLAttribute is generic one and Checkbox component passes this interfaces there: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/global.d.ts - They are empty.

Does somebody know how to implement the data- attributes there ?

Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
Bruce Lee
  • 77
  • 9

1 Answers1

1

In most cases where an interface extends React.ButtonAttributes we filter out all the valid button props (aria included) and pipe them in. Seems this component never got updated to use that approach and is still using an older approach where we put all of those props into 'inputProps'.

  <Checkbox 
  label="Standard checkbox"
  inputProps={{'data-foo': 'bar'}}
  ariaDescribedBy={'descriptionID'} />

https://codepen.io/micahgodbolt/pen/djNGQv

Micah Godbolt
  • 224
  • 1
  • 2