TrackedInputCheckbox

Generates a <input type="checkbox"> Element wrapped in a InputContext.

Checkboxes are tracked with this strategy:

  • We monitor the checked attribute instead of the value attribute, as the latter never changes.
  • We don't listen to onBlur events, but track onChange events instead.
  • The identifier is optional, because we attempt to assign one by reading the value attribute.
  • When trackValues is set we generate an InputValueContext with 0 or 1 as value, representing the checked state.

TrackedInputCheckbox: (props: {
  objectiv?: {
    id?: string,
    normalizeId?: boolean,
    trackValue?: boolean,  
    stateless?: boolean,
    eventHandler?: 'onBlur' | 'onChange' | 'onClick'
  }
}) => <input type="checkbox">

objectiv prop attributes​

typedefault value
optionalidstringinferred from native id, name or value
optionalnormalizeIdbooleantrue
optionaltrackValuebooleanfalse
optionalstatelessbooleanfalse
optionaleventHandler'onBlur' | 'onChange' | 'onClick'onChange
info
  • When the id attribute is omitted, we attempt to infer it from the elements' id, name or value native props.

If that fails, an error will be logged to the Developer Console and the original Component is rendered.

Returns​

<input type="checkbox">

Automatic Events​

Global Contexts​

Usage example​

track selection
import { TrackedInputCheckbox } from '@objectiv/tracker-react';

<div>
  <main>
    <TrackedInputCheckbox value={'a'} />
    <TrackedInputCheckbox value={'b'} />
    <TrackedInputCheckbox value={'c'} />
  </main>
</div>
track also the selected value
import { TrackedInputCheckbox } from '@objectiv/tracker-react';

<div>
  <main>
    <TrackedInputCheckbox value={'a'} defaultChecked objectiv={{ trackValue: true }} />
    <TrackedInputCheckbox value={'b'} objectiv={{ trackValue: true }} />
    <TrackedInputCheckbox value={'c'} objectiv={{ trackValue: true }} />
  </main>
</div>

By default, all Tracked Elements automatically normalize their Context identifiers to a kebab-cased format.

This can be disabled via the normalizeId option:

import { TrackedInputCheckbox } from '@objectiv/tracker-react';

<div>
  <TrackedInputCheckbox value={'some internal id'} objectiv={{ normalizeId: false }} />
</div>

Did you know ?

TrackedInputCheckbox internally uses TrackedInputContext.


See also