Initialize text controls
Render an uncontrolled text, email, or similar input with its initial content.
Conform · Pipe
field.initialValue
field.initialValue is the starting value exposed by Conform field metadata. Use it to initialize uncontrolled controls or calculate their initial checked state.
How it works
field.initialValue is metadata containing the value Conform selected as the field's starting value. Pass it to an uncontrolled input's defaultValue, or compare it with an option value when deriving the initial checked state of radio and checkbox controls.
Syntax
fields.<name>.initialValueKey points
- The field metadata exposes the value Conform assigned when initializing the form.
- Use initialValue as defaultValue for an uncontrolled text-like input.
- Radio controls can derive their initial checked state by comparing initialValue with each option.
- Checkbox-group metadata can have either a scalar string or a collection of selected values.
- For an array-shaped checkbox value, use includes to determine whether the current option starts checked.
Common mistakes
- For checkbox groups, initialValue may be a string or an array, so account for both shapes before checking whether an option is selected.
Example: Render a field's initial value
const [form, fields] = useForm({
defaultValue: { color: 'blue' },
});
return (
<input
key={fields.color.key}
name={fields.color.name}
defaultValue={fields.color.initialValue}
/>
);Use the field's initialValue as the uncontrolled input's defaultValue.
When to use it
Initialize radio groups
Select the matching option when rendering a radio group.
Initialize checkbox groups
Support checkbox groups whose initial selection may be scalar or array-shaped.
Interview questions
QWhat is field.initialValue used for?
initialValue is field metadata representing the value used to initialize that field. For an uncontrolled text input, provide it through defaultValue; for a radio input, compare it with the option value to derive defaultChecked.
Follow-up: How should a checkbox group interpret it? Treat it as either a string or an array, then check whether the array contains the option when applicable.
QHow do you initialize a radio group?
A radio option can use fields.color.initialValue === value for defaultChecked. This derives the initially selected option from the field metadata rather than duplicating the initial value elsewhere.
Follow-up: How would a single checkbox differ? Compare initialValue with the browser's default checkbox value, which is on when no value is specified.
QWhy is the field key important when initialValue changes?
Keep the field metadata key on the input. Conform uses that key to notify React that the input should remount when an intent changes the field's initialValue.
Follow-up: What is the controlled-input exception? An input managed with useInputControl resets its value when the key changes instead of relying on remounting.
Related
useFormuseInputControlfield.keyfield.namedefaultValuedefaultChecked