Pass field-dirty,field-error className to field component

Author: CodeStix

docs/Troubleshooting.md

@@ -36,11 +36,11 @@ When you use [styled-components](https://github.com/styled-components/styled-com
 ```tsx
 // Example styled CustomInput
 const StyledCustomInput: typeof CustomInput = styled(CustomInput)`
-    &.typed-form-dirty {
+    &.field-dirty {
         background-color: #0001;
     }
 
-    &.typed-form-error {
+    &.field-error {
         color: red;
         font-weight: bold;
     }

docs/reference/Field.md

@@ -21,7 +21,7 @@ The input transforms its value based on the `type` prop, which **currently suppo
 
 It is allowed to use multiple inputs on the same field, all of them will be synchronized.
 
-These inputs are given a `className` when errored (`typed-form-error`) or modified (`typed-form-dirty`) by default.
+These inputs are given a `className` when errored (`field-error`) or modified (`field-dirty`) by default.
 
 ## Examples
 
@@ -180,11 +180,11 @@ The name of the field in the form that will be bound to this input.
 
 #### `errorClassName` and `errorStyle`
 
-The className and/or style to set when there is an error on this field. Default className is `typed-form-error`.
+The className and/or style to set when there is an error on this field. Default className is `field-error`.
 
 #### `dirtyClassName` and `dirtyStyle`
 
-The className and/or style to set when this field has been modified. Default className is `typed-form-dirty`.
+The className and/or style to set when this field has been modified. Default className is `field-dirty`.
 
 #### `dateAsNumber` (only type="date")
 

src/Field.tsx

@@ -66,6 +66,7 @@ export function Field<T extends object, K extends keyof T, C extends React.Funct
         checked: typeof v === "boolean" ? v : undefined,
         value: typeof v === "boolean" ? undefined : v,
         disabled: field.state.isSubmitting || props.disabled,
+        className: (field.dirty ? "field-dirty " : "") + (field.error ? "field-error " : "") + props.className,
         field,
         onChange: (ev: any) => {
             let v = "target" in ev ? (["checkbox", "radio"].includes(props.type!) ? ev.target.checked : ev.target.value) : ev;

testing/src/index.css

@@ -1,7 +1,8 @@
 body {
     margin: 0;
     padding: 0;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+        sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
@@ -32,12 +33,12 @@ small {
     font-weight: normal;
 }
 
-.typed-form-dirty {
+.field-dirty {
     outline: 3px solid #0004;
     transition: 50ms linear;
 }
 
-.typed-form-error {
+.field-error {
     outline: 3px solid #f009;
     transition: 50ms linear;
 }