Preview
1–60 characters.
Usage
Field usage<Field label="App" name="app" required hint="1–60 characters." />API
Field APIFieldProps
| prop | type | notes |
|---|---|---|
| label | string | Visible label text. |
| name | string | Form field name (also forwarded to custom controls). |
| id? | string | Explicit control id — set it when an ErrorSummary link needs a stable anchor ("#email"); otherwise the render owns an internal id. |
| error? | string | null | Error message; renders in `status.fail` and sets `aria-invalid` when a non-empty string. |
| hint? | RemixNode | Assistive hint; renders in `text-muted` and joins `aria-describedby`. Takes any node — the Search composition puts a `<Kbd>` in here. |
| prefix? | RemixNode | Adornment INSIDE the field before the input ("https://", a glyph) — mono, muted, non-interactive; default-input path only. Decorative: bake meaning into `label`/`hint`, not the adornment. |
| suffix? | RemixNode | Adornment inside the field after the input ("ms", "@example.dev"). |
| required? | boolean | Marks the control required (native `required` + a quiet visual marker). |
| disabled? | boolean | Disables the default control. |
| inputType? | string | Default control's input type. `'text'` by default. |
| placeholder? | string | Default control placeholder. |
| defaultValue? | string | Default control initial value (uncontrolled). |
| autoComplete? | string | Default control `autocomplete` token. |
| children? | (attrs: FieldControlAttrs) => RemixNode | Custom control render prop. Receives the wiring attrs and OWNS the control; when provided, Field renders no default input. |
| control? | (attrs: FieldControlAttrs) => RemixNode | Same contract as function-children, as a PROP — use this inside islands: a function passed as a JSX CHILD crashes the client reconciler ("Unexpected RemixNode"; Sharp Edge 13), while a function prop is plain data. Wins over children when both are set. |
| mix? | MixInput | Composition passthrough for the wrapping element. |