diff --git a/.storybook/preview.js b/.storybook/preview.js
index 5409af6..59142b7 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -3,6 +3,6 @@ import { Bluelib } from "../src/components/Bluelib"
export const parameters = {
actions: {
- argTypesRegex: "^on[A-Z].*"
+ argTypesRegex: "^on[A-Z][a-z]*$"
},
}
\ No newline at end of file
diff --git a/src/components/inputs/Field.stories.jsx b/src/components/inputs/Field.stories.jsx
new file mode 100644
index 0000000..693a1e0
--- /dev/null
+++ b/src/components/inputs/Field.stories.jsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Field } from "./Field"
+
+
+export default {
+ component: Field,
+ title: "Inputs/Field",
+ decorators: [Decorators.Bluelib],
+ argTypes: {
+ customColor: {
+ control: {type: "color"},
+ },
+ disabled: {
+ control: {type: "boolean"},
+ },
+ },
+}
+
+
+export const Default = props => (
+
+)
+Default.args = {
+ placeholder: "Enter text here",
+ disabled: false,
+ required: false,
+}
diff --git a/src/components/inputs/Field.tsx b/src/components/inputs/Field.tsx
new file mode 100644
index 0000000..cf44796
--- /dev/null
+++ b/src/components/inputs/Field.tsx
@@ -0,0 +1,37 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Types from "../../types"
+import {BaseElement} from "../BaseElement"
+import mergeClassNames from "classnames"
+
+
+interface FieldProps {
+ placeholder: string,
+ required?: boolean,
+ disabled?: boolean,
+
+ onChange?: (event: React.FormEvent) => boolean,
+ onInput?: (event: React.FormEvent) => boolean,
+ onInvalid?: (event: React.FormEvent) => boolean,
+ onReset?: (event: React.FormEvent) => boolean,
+ onSubmit?: (event: React.FormEvent) => boolean,
+
+ [props: string]: any,
+}
+
+
+export function Field({onChange, onInput, onInvalid, ...props}: FieldProps): JSX.Element {
+
+ props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "input", "input-field")
+
+ // Propagate change events only if the element is enabled
+ if(!props.disabled) {
+ props.onChange = onChange
+ props.onInput = onInput
+ props.onInvalid = onInvalid
+ }
+
+ return (
+
+ )
+}