fields.name renders the correct platform field for each schema key.
- You never manually register inputs or bind value/error state for standard fields
- Each generated component already knows its validation, current value, hidden/disabled state, and platform renderer
- Per-render overrides stay possible for labels, hints, placeholders, and presentation without mutating the original schema
- When you need a fully custom DOM/native tree but still want the same schema field, move to
form.fieldController(name)instead of rewriting the field asfield.custom()
Props
Common generated field props available on every field component:
| Method | Type | Description |
|---|---|---|
label? | string | Override the schema label for this render only |
placeholder? | string | Override placeholder copy for this render only |
hint? | string | Override helper copy for this render only |
style? | StyleProp | Wrapper style override |
classNames? | SlotClassMap | Web slot class map (also available as top-level prop) |
className? | string | Web only wrapper class override |
Shared field override capabilities:
| Method | Type | Description |
|---|---|---|
id? / testID? | string | Platform id hooks |
hideLabel? | boolean | Visually suppress the default label |
highlightOnError? | boolean | Keep the error message but suppress the default error chrome when false |
styles? | SlotStyleMap | Slot style map |
classNames? | SlotClassMap | Web slot class map |
wrapperProps? / labelProps? / hintProps? / errorProps? | object | Forward low-level props to the built-in renderer |
renderLabel? / renderHint? / renderError? | (ctx) => ReactNode | Render-hook escape hatches |
renderRequiredMark? | () => ReactNode | Custom required mark renderer |
inputProps? | object | Text-like fields - forward props to the underlying input |
textareaProps? | object | textarea on web |
selectProps? | object | select on web |
renderPicker? | (ctx) => ReactNode | Select-like fields - custom picker UI |
renderOption? | (option, state) => ReactNode | Async select/autocomplete - custom option row |
renderEmpty? / renderLoading? | () => ReactNode | Async select/autocomplete - empty/loading states |
searchInputProps? | object | Phone fields on web |
renderFileIcon? | (file) => ReactNode | File fields on web |
pickFiles? | (ctx) => void | File fields on native |
How overrides behave
- Schema-level builder methods define the default contract for every render of that field
- Component props are useful for one-off copy or presentation overrides in a specific screen or section
- Field components do not accept value/state overrides directly; validation, visibility, disabled rules, and submit lifecycle stay owned by the form runtime
Which customization path to pick
| Path | When to pick it |
|---|---|
<fields.name /> | The built-in renderer already matches the input type |
globalDefaults / per-field props | Structure is fine and you only need visual changes |
renderPicker | For select-like fields where only the picker/modal/sheet needs to be custom |
fieldController(name) | The schema field type is still right, but you want to own the trigger, shell, modal, helper row, or extra surrounding UI |
field.custom(defaultValue) | The value shape or interaction model itself is not one of the built-in field types |