TrackedInputRadio

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

Radio buttons are tracked with this strategy:

  • We don't monitor their previous value, as it 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.
  • We automatically add a ContentContext location, by parsing the name attribute, representing the option group.
  • When trackValue is set we generate an InputValueContext with 0 or 1 as value, representing the checked state.
    • In practice 0 doesn't normally occur, because deselecting a radio is usually not possible.

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

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="radio">

Automatic Events

  • InputChangeEvent when eventHandler triggers. Tracking normally occurs only if checked changed, unless stateless has been set to true.

Global Contexts

Usage example

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

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

<div>
<main>
<TrackedInputRadio name={'options'} value={'a'} objectiv={{ trackValue: true }} />
<TrackedInputRadio name={'options'} value={'b'} objectiv={{ trackValue: true }} />
<TrackedInputRadio name={'options'} 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 { TrackedInputRadio } from '@objectiv/tracker-react';

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

Did you know ?

TrackedInputRadio internally uses TrackedInputContext.