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 trackonChange
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 with0
or1
as value, representing the checked state.- In practice
0
doesn't normally occur, because deselecting a radio is usually not possible.
- In practice
TrackedInputRadio: (props: {
objectiv?: {
id?: string,
normalizeId?: boolean,
trackValue?: boolean,
stateless?: boolean,
eventHandler?: 'onBlur' | 'onChange' | 'onClick'
}
}) => <input type="radio">
objectiv
prop attributes
type | default value | ||
---|---|---|---|
optional | id | string | inferred from native id , name or value |
optional | normalizeId | boolean | true |
optional | trackValue | boolean | false |
optional | stateless | boolean | false |
optional | eventHandler | 'onBlur' | 'onChange' | 'onClick' | onChange |
info
- When the
id
attribute is omitted, we attempt to infer it from the elements'id
,name
orvalue
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 ifchecked
changed, unless stateless has been set totrue
.
Global Contexts
- InputValueContext with the
checked
value, iftrackValue
is set totrue
.
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.